CSS Warning id's not match on client server.

Trying out nextjs with new isSSR, I get this, am I missing something?

react-dom.development.js?d1ee:88 Warning: Prop `id` did not match. Server: "id-f38874" Client: "id-f71d4d"
    in div (created by ForwardRef(Box))
    in ForwardRef(Box)
    in Unknown (created by Disclosure.Content)
    in Disclosure.Content
    in div (created by ForwardRef(Box))
    in ForwardRef(Box)
    in Unknown (created by PageWithHeader)
    in PageWithHeader (at pages/index.tsx:4)
    in div (created by ForwardRef(Box))
    in ForwardRef(Box)
    in Unknown (created by Box)
    in Box (created by Provider)
    in PageProvider (created by Provider)
    in ToastProvider (created by Provider)
    in IdProvider (created by Provider)
    in ColorModeProvider (created by Provider)
    in ThemeProvider (created by Provider)
    in Provider (at pages/index.tsx:3)
    in MyApp (at _app.tsx:8)
    in div (created by ForwardRef(Box))
    in ForwardRef(Box)
    in Unknown (created by Box)
    in Box (created by Provider)
    in PageProvider (created by Provider)
    in ToastProvider (created by Provider)
    in IdProvider (created by Provider)
    in div (created by ColorModeProvider)
    in ColorModeProvider (created by Provider)
    in ThemeProvider (created by Provider)
    in Provider (at _app.tsx:7)
    in App
    in ErrorBoundary (created by ReactDevOverlay)
    in ReactDevOverlay (created by Container)
    in Container (created by AppContainer)
    in AppContainer
    in Root

[jxom]

Thanks for the fast reply @diegohaz. That helps so much. I thought I added in Reakit’s Provider oops! Will to it tomorrow.

[diegohaz]

On Reakit, you have to use the Provider component to generate deterministic ids. Or you can also pass a baseId value to the state hook.