joyui + nextjs + template some theme colors loads after initial page load

Steps to reproduce

Link to live example: (Stackblitz)

Steps:

1. Using https://github.com/mui/material-ui/tree/master/docs/data/joy/getting-started/templates/order-dashboard as inspiration
2. And nextjs integration here
3. The "Used Space" w/ warning color loads using primary color and then changes to warning color after load.
4. This can be somewhat mitigated by setting color property to all children of the card component. Even doing that some elements children change their color after the page has loaded. For example, setting LinearProgress border still flickers / changes color when it's color property is set to warning.
5. Make sure browser is wide enough (Desktop experience) to see the side navigation

Current behavior

Theme color is loaded after initial nextjs render

Expected behavior

Theme color is loaded during initial page render

Context

Not have theme color flickering on page load

Your environment

  System:
    OS: macOS 14.6
  Binaries:
    Node: 20.15.1 - ~/.nvm/versions/node/v20.15.1/bin/node
    npm: 10.7.0 - ~/.nvm/versions/node/v20.15.1/bin/npm
    pnpm: 9.6.0 - ~/.nvm/versions/node/v20.15.1/bin/pnpm
  Browsers:
    Chrome: 127.0.6533.89
    Edge: 127.0.2651.86
    Safari: 17.6
  npmPackages:
    @emotion/react: catalog: => 11.13.0 
    @emotion/styled: catalog: => 11.13.0 
    @mui/icons-material: catalog: => 5.16.6 
    @mui/joy: catalog: => 5.0.0-beta.48 
    @types/react: catalog: => 18.3.3 
    react: catalog: => 18.3.1 
    react-dom: catalog: => 18.3.1 
    typescript: catalog: => 5.5.4 

Search keywords: joyui nextjs theme reload flicker