Estoy tratando de usar la tabla MUI con Collapse para expandir/contraer filas. Sin embargo, cuando se usa el colapso, las filas expandidas se comprimen en una sola celda. ¿Cómo puedo alinear las celdas con la tabla principal?

 export default function App() { const [expanded, setExpanded] = useState(false); return ( <Table> <TableHead> <TableRow> <TableCell /> <TableCell>Header 1</TableCell> <TableCell>Header 2</TableCell> <TableCell>Header 3</TableCell> <TableCell>Header 4</TableCell> </TableRow> </TableHead> <TableBody> <TableRow> <TableCell onClick={() => setExpanded(!expanded)}>Expand</TableCell> <TableCell>A</TableCell> <TableCell>B</TableCell> <TableCell>C</TableCell> <TableCell>D</TableCell> </TableRow> <Collapse in={expanded} timeout="auto" unmountOnExit> <TableRow> <TableCell /> <TableCell>E</TableCell> <TableCell>F</TableCell> <TableCell>G</TableCell> <TableCell>H</TableCell> </TableRow> </Collapse> </TableBody> </Table> ); };

Quitar los resultados de Colapso en el formato correcto. por ejemplo, el estado actual es:

Resultado deseado (después de expandir es)