Isolating styles within Microfrontend app using StylesProvider

Question

I have a Microfrontend app (using Module Federation) with 1 Host and a couple of child MFEs I am trying to isolate the styles between Host and also the child MFEs

So in my Host App.js, I have the below JSX;

import {createGenerateClassName, StylesProvider} from '@material-ui/core/styles';
const generateClassName = createGenerateClassName({
    productionPrefix: 'my-host',
    seed: `my-host-seed`,
    disableGlobal: true
});

<StylesProvider>
    <MyMenuWithLinksToChildRoutes />
</StylesProvider>

<div className="childWrapper">
    <Route exact path="/ChildMFERoute1">
        <ChildMFE1Wrapper  />
    </Route>
    <Route exact path="/ChildMFERoute2">
        <ChildMFE2Wrapper  />
    </Route>
</div>

Please note above that the StylesProvider only wraps the Menu component which only has links to render the child routes and the child components themselves render withing a seperate div in the Host i.e. "childWrapper"

Now, in the Host ChildMFE1Wrapper, I lazily load the actual child component as below;

const Route1Component = React.lazy(() => import('childMfe1/Route1Component'))   

return(
    <div>
      <React.Suspense  fallback={<Spinner/>}>
        <Route1Component {...props}/>
      </React.Suspense>
    </div>
  )
  

Now, in the child MFE, I have App.js as below;

const generateClassName = createGenerateClassName({
  productionPrefix: "my-child-1",
  seed: `my-child-1-seed`,
  disableGlobal: true
});

<StylesProvider generateClassName={generateClassName}>
    <Router>
          <Route exact path="/ChildMFERoute1">
            <ChildComponent1 />
          </Route>
    </Router>
</StylesProvider>

Now, the issue is when I render this in production environment, I see a strange behavior. While on all loads, I can see the DOM rendered with 'my-host-seed' on every load. But for the child, I see that the DOM elements with classnames 'my-child-1-seed' are not always rendered.

Is there something additional I need to do to ensure that these classnames are rendered consistently ?