javascript - MUI não carrega variante personalizada na primeira vez que a página é carregada

Criei uma variante de botão personalizada e adicionei estilos personalizados, o problema é que quando a página está carregando pela primeira vez os estilos personalizados não estão sendo aplicados. Os estilos são aplicados apenas quando a página é atualizada. Eu tinha aplicado variantes personalizadas em projetos Next.js, mas desta vez estou adicionando em um projeto React.js sem sucesso

materialTheme.ts

import { createTheme } from '@mui/material'
import { systemColors, systemStylingSettings } from '../globalVariables'

declare module '@mui/material/Button' {
  interface ButtonPropsVariantOverrides {
    containedRed: true
  }
}

const theme = createTheme({
  components: {
    //   Buttons
    MuiButton: {
      variants: [
        {
          props: { variant: 'containedRed' },
          style: {
            backgroundColor: systemColors.orange,
            borderRadius: systemStylingSettings.borderRadius,
            boxShadow: 'none',
            color: '#ffffff !important',
            '&:hover': {
              backgroundColor: systemColors.orangeDark,
              boxShadow: 'none'
            }
          }
        }
      ]
    }
  }
})

export default theme

index.js

import React, { Suspense } from 'react'
import ReactDOM from 'react-dom'
import './index.scss'
import App from './App'
import * as serviceWorker from './serviceWorker'
import './i18n'
import { Provider } from 'react-redux'
import store from './redux/store'
import { BrowserRouter as Router } from 'react-router-dom'
import { SnackbarProvider } from 'notistack'
import { ThemeProvider } from '@mui/material'
import theme from './styles/materialTheme.ts'

ReactDOM.render(
  <Suspense fallback='Loading'>
    <ThemeProvider theme={theme}>
      <Provider store={store}>
        <Router>
          <SnackbarProvider maxSnack={10}>
            <App />
          </SnackbarProvider>
        </Router>
      </Provider>
    </ThemeProvider>
  </Suspense>,
  document.getElementById('root')
)
serviceWorker.unregister()

jobs.tsx

import { Button } from '@mui/material'
import React from 'react'

const Jobs = () => {

  return (
    <div>
      <main>
        {/* Create new job button */}
        <Button variant='containedRed'>Custom style button</Button>
      </main>
    </div>
  )
}

export default Jobs