I'm styling a MUI v5 `Grid` as follows:

```js
const SettingsGrid = styled(Grid)(({ theme }) => ({
    width: `calc(100% - calc(${Number(theme.spacing(2))} * 2))`,
    margin: theme.spacing(2),

    '& .MuiCard-root + .MuiTypography-subtitle1': {
        marginTop: theme.spacing(4),
    },
}))

```

Then, I'm using it as follows:

```js
<Box m={1} overflow="auto">
  <SettingsGrid
      container
      direction="row"
      justifyContent="center"
  >
      <Grid
          direction="column"
          style={{ minWidth: '35em', maxWidth: '60em' }}
      >
          <!-- ... -->
      </Grid>
    </SettingsGrid>
</Box>

```

This now throws this console warning at runtime:

```
Failed prop type: The prop `direction` of `Grid` can only be used together with the `container` prop.

```

I've tried with `container={true}` but this doesn't help. It seems as if the `container` property gets lost in `styled()`. How can I fix this? I'm at a loss.

EDITH: <https://codesandbox.io/s/gritty-styled-grid-7l04g>