[material-ui][nextjs] useLocalStorage for theme name causes theme styles to get out of sync about material-ui HOT 1 CLOSED

import { ThemeProvider as MuiThemeProvider } from '@mui/material/styles';
import {createContext, PropsWithChildren, useCallback, useEffect, useMemo, useState} from "react";
import theme from '../src/theme';

type IThemeSwitch = {
  setTheme: (name: string) => void;
}

export const SwitchContext = createContext<IThemeSwitch>({
  setTheme: () => undefined,
});

export const ThemeProvider = ({ children}: PropsWithChildren) => {
  const [themeName, setTheme] = useState('');

  const setThemeWithLs = useCallback((newTheme: string) => {
    setTheme(newTheme);
    window.localStorage.setItem('themeName', newTheme);
  }, []);
  const switchValue = useMemo(() => ({ setTheme: setThemeWithLs }), [setThemeWithLs])

  useEffect(() => {
    const lsTheme = window.localStorage.getItem('themeName');
    if (lsTheme) {
      setTheme(lsTheme);
    }
  }, [])

  const themeValue = useMemo(() => {
    return themeName === 'dark' ? theme.dark : theme.light;
  }, [themeName])

  return (
    <SwitchContext.Provider value={switchValue}>
      <MuiThemeProvider theme={themeValue}>
        {children}
      </MuiThemeProvider>
    </SwitchContext.Provider>
  )
}