Material UI Grid item not working properly

I have:

      <div style={{ flexGrow: 1 }}>
        <Grid container spacing={0} style={{ width: '100%' }}>
          <Grid item xs={12} sm={6}>
            Left Side
          </Grid>
          <Grid item xs={12} sm={6}>
            right Side
          </Grid>
        </Grid>
      </div>

You can see the generated styles are just MuiGrid-item with no reference of the size. What am I doing wrong?

I copied your code to a CODE-SANDBOX and everything was fine there.

Here is the screenshot:

As you can see, everything is working like a charm.

The only thing that I mentioned in your question is that in the screenshot you've provided, you've applied a background: red; style to the container, but there is no such a style property in the code that you've inserted.

Maybe you're not connected to the development server, and you are viewing a cached version, which can be caused by service workers in your PWA.

It's recommended that you do not enable an offline-first service worker in a development environment, as it can lead to frustration when previously cached assets are used and do not include the latest changes you've made locally.

It was great If you could provide more details in your question.