Problem with adding a Border to the Header and Body of a material-table

Question

I'm using material-table in my React App. I want to add left and right border to the table.

Here is the code for overriding Header and Body components.

      components={{
        Header: props => (
          <Box ml={2} mr={2}>
            <MTableHeader  {...props}/>
          </Box>
        ),
        Body: props => (
          <Box ml={2} mr={2}>
            <MTableBody  {...props}/>
          </Box>
        ),
      }}

When I try to add the borders, table header and body is distorted like this:

I also tried overriding the Table component with Paper but it looks like Paper is a wrapper to the actual table.