I’m using Material-UI’s Grid2 component to create a responsive layout for a form. My expectation is that using sm={6} should result in each input field occupying 50% of the width on medium-sized screens. However, the inputs are not stretching to the expected size.

I discovered that wrapping the grid in a Box component resolves the issue, but this feels like an unnecessary extra step since Grid2 should already handle the layout.
This doesn’t display correctly unless I add a Box

<Box>
  <Grid2 container spacing={2}>
    <Grid2 size={{ xs: 12, sm: 6 }}>
      <FormBuilderInput name="customer_first_name" label="First Name" />
    </Grid2>
    <Grid2 size={{ xs: 12, sm: 6 }}>
      <FormBuilderInput name="customer_last_name" label="Last Name" />
    </Grid2>
  </Grid2>
</Box>

I inspected the elements using browser dev tools, and the grid uses flex-wrap: wrap, and the input fields are set to width: 100%.
I reduced the spacing prop to see if the grid layout was affected by gaps.
I also tried removing the Box, but the layout breaks again.
Expected behavior: The grid items should occupy 50% of the width on medium-sized screens without needing the Box wrapper.