Javascript – map is not a function

I’m having an odd issue. So I’m using fetch api to get some static data from an api endpoint to get some data. When I then try to map over the data it tells me map is not a function. So I’m making this in react. Also I haven’t used fetch too much so maybe I’m missing something easy.

Here is the fetchData code where I get the data no problem and then using setScanData(resData) for some state.

const fetchData = async () => {
  const res = await fetch(baseURL + apiAddOn);
  const resData = await res.json();
  setScanData(resData)
}

Here is how the resData comes back.

[
    {
        "teamName": "Team 1",
        "date": "2021-01-19",
        "tasksAWeek": 14
    },
    {
        "teamName": "Team 2",
        "date": "2021-01-19",
        "tasksAWeek": 21
    },
    {
        "teamName": "Team 3",
        "date": "2021-01-19",
        "tasksAWeek": 36
    }
]

And then here is how I try to map over the data and where is gives me the map is not a function error.

 {scanData.map((data) => {
        <div key={`${data.teamName}-${data.date}`}>
            <p>Team Name: {data.teamName}</p>
            <p>Date: {data.date}</p>
            <p>Scans a Week: {data.scansAWeek}</p>
            <p>Total Scans: {data.totalScans}</p>
        </div>
    })}

But ye so I’m not too sure where I’m going wrong with this. Any help would be useful.