¿Cómo puedo solucionar esto? Los encabezados de las tablas siguen repitiéndose para cada fila de la tabla, como se ve en la imagen a continuación. Además, la mesa siempre está en el extremo más alejado del lado derecho. ¿Cómo puedo hacer esto en el centro también?

Códigos y caja: https://codesandbox.io/s/xenodochial-fog-s984v0?file=/src/App.js

códigos:

 const options = { filter: true, selectableRows: "none", responsive: "simple", expandableRows: true, renderExpandableRow: (rowData, rowMeta) => { console.log(rowData, "rowData"); return Object.entries(rowData[3]).map(([key, value]) => { return ( <TableContainer> <Table> <TableHead> <TableCell align="right">Name</TableCell> <TableCell align="right">Color</TableCell> </TableHead> <TableBody> <TableRow key={key}> <TableCell component="th" scope="row"> {value.name} </TableCell> <TableCell align="right">{value.color}</TableCell> {/* Product: {value.name} + {value.size} +{" "} {value.color + value.quantity} */} </TableRow> </TableBody> </Table> </TableContainer> ); }); } };