FOUC Issue with MUI using Styled Components in Next.js 13

Question

Problem: I am facing a Flash of Unstyled Content (FOUC) issue while using Next.js 13 with Material-UI (mui) and Styled Components. It appears that the styles generated by Styled Components are not being applied on time, resulting in a brief period of unstyled content during the page load.

Context: I came across a suggested solution that addresses a similar FOUC issue seems like it for Nex 12. I have not attempted to implement this solution as it relies on the use of getInitialProps(), which AFAIK is specific to Next.js 12.

import Document from "next/document";
import { ServerStyleSheet } from "styled-components";

export default class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const sheet = new ServerStyleSheet();
    const originalRenderPage = ctx.renderPage;

    try {
      ctx.renderPage = () =>
        originalRenderPage({
          enhanceApp: (App) => (props) =>
            sheet.collectStyles(<App {...props} />),
        });

      const initialProps = await Document.getInitialProps(ctx);
      return {
        ...initialProps,
        styles: [initialProps.styles, sheet.getStyleElement()],
      };
    } finally {
      sheet.seal();
    }
  }
}

This is the package.json

{
  "name": "website",
  "version": "0.1.0",
  "description": "israhelp website",
  "engines": {
    "node": "20.x"
  },
  "private": true,
  "scripts": {
    "dev": "next dev",
    "dev-inspect": "NODE_OPTIONS='--inspect' next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "format": "prettier --write \"./**/*.{js,jsx,mjs,cjs,ts,tsx,json}\"",
    "seed": "node prisma/seed.js",
    "storybook": "storybook dev -p 6006",
    "build-storybook": "storybook build"
  },
  "dependencies": {
    "@emotion/react": "^11.11.1",
    "@emotion/styled": "^11.11.0",
    "@mui/icons-material": "^5.14.14",
    "@mui/material": "^5.14.15",
    "@mui/styled-engine-sc": "^6.0.0-alpha.3",
    "@prisma/client": "^5.4.2",
    "next": "13.5.5",
    "next-auth": "^4.24.5",
    "react": "^18",
    "react-dom": "^18",
    "styled-components": "^6.1.0"
  },
  "devDependencies": {
    "@storybook/addon-essentials": "^7.5.1",
    "@storybook/addon-interactions": "^7.5.1",
    "@storybook/addon-links": "^7.5.1",
    "@storybook/addon-onboarding": "^1.0.8",
    "@storybook/blocks": "^7.5.1",
    "@storybook/nextjs": "^7.5.1",
    "@storybook/react": "^7.5.1",
    "@storybook/testing-library": "^0.2.2",
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "eslint": "^8",
    "eslint-config-next": "13.5.5",
    "eslint-plugin-storybook": "^0.6.15",
    "prettier": "^3.0.3",
    "prisma": "^5.4.2",
    "storybook": "^7.5.1",
    "typescript": "^5"
  }
}

Request: I am seeking guidance on resolving this FOUC issue specifically in the context of Next.js 13. If there are any updates or modifications required for the provided code snippet to be compatible with Next.js 13, or if there are alternative solutions or best practices for addressing FOUC with Styled Components in Next.js 13, I would greatly appreciate any assistance.