useDarkMode Next.js issue

When using the hook useDarkMode and I presume it could be the same issue for other hooks with Next.js framework and Material-UI, I get the error message: Prop className did not match.

In the console log, the error refer to the documentation: https://nextjs.org/docs/messages/react-hydration-error

Here is my current code generating this error:

const { isDarkMode } = useDarkMode()

const theme = useMemo(
    () =>
      createTheme(themeOptions(isDarkMode ? 'dark' : 'light')),
    [isDarkMode]
  )

The way I was able to fix this error to happen was changing my code to:

  const [dark, setDark] = useState(false)
  const { isDarkMode } = useDarkMode()

  useEffect(() => {
    setDark(isDarkMode)
  }, [isDarkMode])

  const theme = useMemo(
    () =>
      createTheme(themeOptions(dark ? 'dark' : 'light')),
    [dark]
  )

I do not know if this error is actually related to the hooks or maybe with the useMemo hook instead!

[PabloLION]

may be its related to this comment https://github.com/juliencrn/usehooks-ts/pull/86#pullrequestreview-855192893

[juliencrn]

We can’t read localStorage and mediaQueries window API on SSR, it isn’t an easy problem. You can try to set an arbitrary default theme mode, then, updating it during the hydration, or ensure that the ThemeProvider in mounted in client-side only code.

@emulienfou, Could you create a minimal reproduction of the bug to play with it?