Spread a detail line over 2 rows using React Material UI Table gives warning "Warning: Each child in a list should have a unique "key" prop."

Question

I am attempting to format my table as such:

EVENT ID      EVENT NAME            DATE          LOCATION

12345678      Rolling Stones        01/01/2024    Merriweather Post Pavillion
Rain or shine! No weapons or alcohol will be permitted

12345679      Exorcist Believer     01/01/2024    Regal Cinemas
No one under the age of 18 will be admitted without a parent / legal guardian
       
12345680      Justin Beiber         01/01/2024    Regal Cinemas
All ages - 12 and up, no outside food or drinks permitted

While it displays fine, I get the warning 'Warning: Each child in a list should have a unique "key" prop.' It looks like material UI table is interpreting each TableRow as distinct rows instead of evaluating them as a single logical row and assigning the same key value to both, which trips a duplicate key warning.

Does anyone know how to get rid of the warning?

My code is:

<Paper className="paper">
    <TableContainer className="table-container">
        <Table>
            <TableHead>
                <TableRow>
                    <TableCell>
                        Event ID
                    </TableCell>
                    <TableCell>
                        Event Name
                    </TableCell>
                    <TableCell>
                        Date
                    </TableCell>
                    <TableCell>
                        Location
                    </TableCell>
                </TableRow>
            </TableHead>
            <TableBody>
                {rows && rows.map((row) => {
                    return (
                        <>
                            <TableRow key={row.eventId}>
                                <TableCell>
                                    <row.eventId}
                                </TableCell>
                                <TableCell>
                                    <row.eventName}
                                </TableCell>
                                <TableCell>
                                    <row.eventDate}
                                </TableCell>
                                <TableCell>
                                    <row.location}
                                </TableCell>
                            </TableRow>

                            <TableRow>
                                <TableCell colspan={4}>
                                    <row.description}
                                </TableCell>
                            </TableRow>
                        </>
                    );
                })}
            </TableBody>
        </Table>
    <TableContainer>
</Paper>

Answer 1

I found the answer:

Warning: Each child in a list should have a unique "key" prop but i have key props

I needed to pass the key property to the Fragment tag not the TableRow tag.

It works now.