'Where am I missing a key prop here? I'm generating uuids for TableCell keys and I'm using row.id for the row keys

I have this bit of code where I'm getting the warning:

Each child in a list should have a unique "key" prop. Check the render method of AllPersonnel... at TableRow

And the table cells are not rendering. Any help would be appreciated. Thanks!

       <TableContainer component={Paper}>
            <Table>
              <TableHead>
                <TableRow key={uuidv4()}>
                  {cols.map((col) => {
                    return <TableCell key={col.path}>{col.name}</TableCell>
                  })}
                </TableRow>
              </TableHead>
    
              <TableBody>
    
                {personnel.map((row, i) => { 
                  return (
                    
                    <TableRow key={row.id}>
                      <TableCell key={uuidv4()}>{row.first_name}</TableCell>
                      <TableCell key={uuidv4()}>{row.last_name}</TableCell>
                      <TableCell key={uuidv4()}>{row.section}</TableCell>
                      <TableCell key={uuidv4()}>{row.role}</TableCell>
                      <TableCell key={uuidv4()}>{row.employee_type}</TableCell>
                    </TableRow>
                    
                  );
                })} 
              </TableBody>
            </Table>
          </TableContainer>


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source