How to wrap a row in a Box in react material UI table?

I am trying to wrap my row in Box element:

return (
    <React.Fragment>
        <Box>
        <TableRow>
            <TableCell align="center" className={classes.cell}>{row.shift_type}</TableCell>
            <TableCell align="center" className={classes.cell}>{row.in_time_local}</TableCell>
            <TableCell align="center" className={classes.cell}>{row.distance || '---'}[enter image description here][1]</TableCell>
            <TableCell align="center" className={classes.cell}>{row.shift_duration}</TableCell>
            <TableCell align="center" className={classes.cell}>{row.job_description}</TableCell>
        </TableRow>
        </Box>
    </React.Fragment>
);

However it is coming out like this:

When I want it like this: