cannot use custom Material UI theme

Question

I'm trying to override some Material UI theme values (background color for example):

// theme.tsx

import {createTheme} from '@mui/material/styles';
import {grey} from '@mui/material/colors';

export const theme = createTheme({
  palette: {
    background: {
      default: grey[500],
    },
  },
});

// index.tsx

import {ThemeProvider, StyledEngineProvider} from '@mui/material/styles';
import {theme} from 'Src/theme';

...

  const Root = () => {
    return (
      <ApolloProvider client={client}>
        <ThemeProvider theme={theme}>
          <App />
        </ThemeProvider>
      </ApolloProvider>
    );
  };

  render(<Root />, document.getElementById('root'));

But the background color of my app is still white.