In a React code, when trying to map the results of API I'am unable to get the data. Here is the code for reference.

1. App.js

```
export const AdminPanel = () => {
  const classes = useStyles();

  const [results, setResults] = useState([])

  const profileData = async () => {
    try {
        const res = await axios.get("https://randomuser.me/api/?results=10");
        setResults(res)
    } catch(err) {
        console.log(err)
    }
}

useEffect(() => {
    profileData()
}, [])

  return (
    <TableContainer component={Paper}>
      <Table className={classes.table} aria-label="simple table">
        <TableHead>
          <TableRow>
            <TableCell>First Name</TableCell>
            <TableCell align="right">Last Name</TableCell>
            <TableCell align="right">Address</TableCell>
            <TableCell align="right">Photo</TableCell>
            <TableCell align="right">Email</TableCell>
            <TableCell align="right">DOB</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>

            {results.map((person) => {
                console.log('PERSON', person)
            })}

        </TableBody>
      </Table>
    </TableContainer>
  );
}

```

Even though declared results as Array, still gives error. Am I mistaking somewhere.
What could be appropriate solution?