How to fix my React Table cell problem (using React Table and MUI)

I am new to React and I created table component using React Table-MUI. Then I try to put my table row in to <Box></Box> like below code. Then I saw my whole table body is only take space of y first column and other columns are empty.

How do I correct this problem? The <Box></Box> is mandatory to wrap every row.

<TableContainer>
    <TableHeader>
    .
    .
    .
    </TableHeader>

    <TableBody>
        {data.map((item,index) => {
            return(
                <Box>
                   <TableCell></TableCell>
                   <TableCell></TableCell>
                   <TableCell></TableCell>
                </Box>
            )
        })}
    </TableBody>
</TableContainer>

I need to get every column under to it header. Right now whole row is in under first column. How can I do this?

Look at table syntax: https://www.w3schools.com/html/html_tables.asp

And MUI table docs: https://mui.com/material-ui/react-table/

<table>
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Sum</td>
      <td>$180</td>
    </tr>
  </tfoot>
</table>

Under hood MUI table simple table with styles. You should not use div in tbody. Wrap cells with TableRow.