Add Table Row Data within the Material-UI Accordion

I have to create a table populated with two accordions with mock data and one accordion with the data from the database using reactjs in Material-UI. I have created an accordion having the table data. I want only the Table data in the accordion not the heading. I am having trouble getting the Table data in the accordion section.

<Paper className={classes.root}>
      <Table className={classes.table}>
        <TableHead>
          <TableRow>
             <TableCell>Dessert (100g serving)</TableCell>
            <TableCell align="right">Calories</TableCell>
            <TableCell align="right">Fat (g)</TableCell>
            <TableCell align="right">Carbs (g)</TableCell>
            <TableCell align="right">Protein (g)</TableCell>
          </TableRow>
         </TableHead>
         <Accordion>
      <AccordionSummary
        expandIcon={<ExpandMoreIcon />}
        aria-controls="panel1a-content"
        id="panel1a-header"
      >
        <Typography className={classes.heading}>OutStanding</Typography>
      </AccordionSummary>
      <AccordionDetails>
         <TableBody>
        {rows.map(row => (
            <ExpandingRow row={row} />
          ))}
          </TableBody>
         </AccordionDetails>
    </Accordion>
    </Table>
    </Paper>

The Screen looks like this current screen

How do I achieve it? Any assistance would be greatly appreciated, thanks!