How to add accordion on mui table in react js?

npm install @mui/material @emotion/react @emotion/styled

yarn add @mui/material @emotion/react @emotion/styled

import {
  Accordion,
  AccordionDetails,
  AccordionSummary,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow
} from "@mui/material";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";

const tableData = [
  {
    id: 1,
    name: "Mohan",
    age: 30,
    address: "Solapur",
    details:
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed efficitur bibendum ligula vitae ornare."
  },
  {
    id: 2,
    name: "shyam",
    age: 25,
    address: "Solapur",
    details: "Integer dignissim auctor velit, at tempor lorem pretium in."
  }
  // Add more objects as needed
];

function App() {
  return (
    <TableContainer>
      <Table>
        <TableHead>
          <TableRow>
            <TableCell>ID</TableCell>
            <TableCell>Name</TableCell>
            <TableCell>Age</TableCell>
            <TableCell>Address</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {tableData.map((row) => (
            <TableRow key={row.id}>
              <TableCell>{row.id}</TableCell>
              <TableCell>{row.name}</TableCell>
              <TableCell>{row.age}</TableCell>
              <TableCell>
                <Accordion>
                  <AccordionSummary
                    expandIcon={<ExpandMoreIcon />}
                    aria-controls="panel1a-content"
                    id="panel1a-header"
                  >
                    {row.address}
                  </AccordionSummary>
                  <AccordionDetails>
                    <p>{row.details}</p>
                  </AccordionDetails>
                </Accordion>
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </TableContainer>
  );
}

export default App;