I'm trying to use custom jss plugins with React MUI 5.1.0 Before with MUI 4 i used StylesProvider to pass the jss as:

import React from 'react'
import ReactDOM from 'react-dom'
import { StylesProvider, jssPreset, ThemeProvider } from '@material-ui/core/styles'
import increaseSpecificity from 'jss-increase-specificity'
import { create } from 'jss'
import App from './App'
import theme from './materialUi/mainTheme'

const jss = create({
  plugins: [...jssPreset().plugins, increaseSpecificity({ repeat: 3 })],
})


ReactDOM.render(
  <StylesProvider jss={jss}>
    <ThemeProvider theme={theme}>
      <App />
    </ThemeProvider>
  </StylesProvider>,
  document.getElementById('root'),
)

and that was working. But after the migration to the v5 component looks like

import React from 'react'
import ReactDOM from 'react-dom'
import { ThemeProvider } from '@material-ui/core/styles'
import { StylesProvider, jssPreset } from '@mui/styles'
import increaseSpecificity from 'jss-increase-specificity'
import { create } from 'jss'
import App from './App'
import theme from './materialUi/mainTheme'

const jss = create({
  plugins: [...jssPreset().plugins, increaseSpecificity({ repeat: 3 })],
})

ReactDOM.render(
  <StylesProvider injectFirst jss={jss}>
    <ThemeProvider theme={theme}>
      <App />
    </ThemeProvider>
  </StylesProvider>,
  document.getElementById('root'),
)

And custom plugin not attached

(Context: I'm trying to increase the specificity of my MUI styles because my react app using as a WordPress plugin, so i need to override current WP styles)