Map through Deezer api is not a function error

Question

I would like to create an autocomplete searchBar with Deezer api but when I need to map through artists, I can see this errors:

My App.js is this code:

import React, {useState, useEffect} from 'react'
import '../components/SearchBar.css'
import axios from 'axios'

const baseURL = "https://api.deezer.com";

const SearchBar = () => {

    const [searchQuery, setSearchQuery] = useState('')
    const [autoComplete, setAutoComplete] = useState([])

    const changeHandler = (e) => {
        setSearchQuery(e)
    }
    const submitHandler = (e) => {
        e.preventDefault()
        setSearchQuery(e)
    }

    const prepareSearchQuery = (query) => {
        const url = `${baseURL}/search?q=${query}`;
        return encodeURI(url)
    }

    const getData = async () => {
        const URL = prepareSearchQuery(searchQuery);
        const response = await axios.get(URL).catch((error) => {
            console.log('Error: ', error);
        });
        setAutoComplete(response.data)
        console.log(response.data)
    }

    getData()

    return (
        <div>
            <form onSubmit={(e) => submitHandler(e.target.value)} >
                <input
                    placeholder='Search here'
                    type='text'
                    onChange={(e) => changeHandler(e.target.value)}
                    value={searchQuery}
                />
                <button className='search-button' >SEARCH</button>
            </form>

                {autoComplete.map(({artist}) => {
                    return <div key={artist.id} >
                        <p>{artist.name}</p>
                        <img src={artist.picture_small} />
                    </div>
                })}
        
        </div>
    )
}
export default SearchBar