Receiving map is not a function for a json list that I pull down in React [duplicate]

Right now, I am trying to create a react JS page that pulls down a JSON from a FAST API endpoint and displays the result in the table. Here is the code I have currently:

import {useState, useEffect } from "react";

const URL = 'http://3.141.192.107/get-pga-best-odds'

function playerOddsTable(data) {
  return (
      <div>
          <TableContainer>
              <Table>
                  <TableHead>
                      <TableRow>
                          <TableCell>Golfer</TableCell>
                          <TableCell>Odds</TableCell>
                          <TableCell>Sportsbook</TableCell>
                      </TableRow>
                  </TableHead>
                  <TableBody>
                    {data.map((list, index) => (
                      <TableRow key={index}>
                          <TableCell>{list.Name}</TableCell>
                          <TableCell>{list.Odds}</TableCell>
                          <TableCell>{list.Book}</TableCell>
                      </TableRow>
                    ))}
                  </TableBody>
              </Table>
          </TableContainer>
      </div>
  )
}



const App = () =>  {
  const [users, setUsers] = useState([]);

  const fetchUsers = async (url) => {
      try {
          const res = await fetch(url);
          const data = await res.json();
          if (data.length > 0) {
              setUsers(data);
          }
          console.log(data);
      } catch (e) {
          console.error(e)
      }
    }


    useEffect(() => {
        fetchUsers(URL);
    }, [])
  


  return (
    <>
    <StyledPaper>
      <h1> Sharp Golf </h1>
    </StyledPaper>
    <Paper>
      {playerOddsTable(users)}
    </Paper>
    </>
  );

}

export default App;

I am currently receiving this error:

data.map is not a function
TypeError: data.map is not a function
    at playerOddsTable (http://localhost:3000/main.c8364f10585f74f71bb8.hot-

It comes from the fact that I try to use map on the data I receive from the URL.

I have manually put a JSON from this website in and been able to properly run my code on it. I have also tried looking at the logs and it appears that the data is able to be fetched. I’m not familiar with javascript at all, this is one of my first projects learning it. I wonder if there is some race condition where it tries to map the data before accessing the API. Any help would be much appreciated.

• I recently tried setting the default state to an array with a blank object and the error still occurs. Is the data I’m pulling down in the wrong format?