How to fix Warning: Prop `className` did not match. Server: "..." Client: "..." in React

Warning: Prop `className` did not match.
Server: "css-abc123 MuiButton-root"
Client: "css-xyz789 MuiButton-root"

npm install --save-dev babel-plugin-styled-components

{
  "plugins": [
    [
      "babel-plugin-styled-components",
      {
        "ssr": true,
        "displayName": true,
        "preprocess": false
      }
    ]
  ]
}

module.exports = {
  compiler: {
    styledComponents: true,
  },
}

import createCache from '@emotion/cache';

export default function createEmotionCache() {
  return createCache({ key: 'css', prepend: true });
}

import { CacheProvider } from '@emotion/react';
import createEmotionCache from '../lib/createEmotionCache';

const clientSideEmotionCache = createEmotionCache();

function MyApp({ Component, emotionCache = clientSideEmotionCache, pageProps }) {
  return (
    <CacheProvider value={emotionCache}>
      <Component {...pageProps} />
    </CacheProvider>
  );
}

import createEmotionServer from '@emotion/server/create-instance';
import createEmotionCache from '../lib/createEmotionCache';

export default class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const cache = createEmotionCache();
    const { extractCriticalToChunks } = createEmotionServer(cache);

    const originalRenderPage = ctx.renderPage;
    ctx.renderPage = () =>
      originalRenderPage({
        enhanceApp: (App) => (props) => <App emotionCache={cache} {...props} />,
      });

    const initialProps = await Document.getInitialProps(ctx);
    const emotionStyles = extractCriticalToChunks(initialProps.html);

    return { ...initialProps, emotionStyles };
  }
}

function ThemeToggle() {
  const isDark = localStorage.getItem('theme') === 'dark';
  return <div className={isDark ? 'dark' : 'light'}>...</div>;
}

function ThemeToggle() {
  const [isDark, setIsDark] = useState(false);

  useEffect(() => {
    setIsDark(localStorage.getItem('theme') === 'dark');
  }, []);

  return <div className={isDark ? 'dark' : 'light'}>...</div>;
}

npm list styled-components
npm list @emotion/react
npm list @mui/material

rm -rf node_modules package-lock.json
npm install

{
  "dependencies": {
    "styled-components": "6.1.8",
    "@emotion/react": "11.11.3"
  }
}

function Timestamp() {
  const [time, setTime] = useState(new Date().toISOString());

  useEffect(() => {
    setTime(new Date().toISOString());
  }, []);

  return (
    <div suppressHydrationWarning>
      {time}
    </div>
  );
}