.mapu nie je funkcia, pri načítaní údajov z API reactjs

Som pomocou API na načítanie údajov. Keď som konzoly.denník moje údaje, ukazuje sa ako pole. Ale keď sa snažím na mapu nad ním získať údaje, ktoré sa majú zobraziť, to mi hovorí, že .mapu nie je funkcia. Vytvoril som si vlastný useFetch háčik a potom som importujete do samostatná zložka. Tu je môj kód a screenshot z konzoly.denník:

useFetch.js

import { useEffect, useState } from 'react'

function useFetch(url) {
    const [data, setData] = useState(null)
    const [isLoading, setIsLoading] = useState(true)
    const [error, setError] = useState(null)

    useEffect(() => {
        fetch(url)
            .then(response => {
                if (!response.ok) {
                    throw Error("Sorry, couldn't fetch data for this resource!")
                }
                return response.json()
            })
            .then(responseData => {
                setData(responseData)
                setIsLoading(false)
                setError(null)
            })
            .catch(error => {
                setIsLoading(false)
                setError(error.message)
            })
    }, [url])

    return { data, isLoading, error }
}

export default useFetch

List.js

import React from 'react'
import useFetch from './useFetch'

function PrizeList2017() {
    const { data } = useFetch('http://api.nobelprize.org/v1/prize.json?year=2017&yearTo=2017')

    return (
        <div className="prize-list-2017-container">
            <h1>2017</h1>
            {data.map(prize => (
                <div key={prize.id}>
                    <h2>{prize.category}</h2>
                </div>
            ))}
            {console.log(data)}
        </div>
    )
}

export default PrizeList2017

konzoly.prihlásenie

konzoly.prihláste info obrázok

Vašu pomoc, je veľmi cenený!