ChakraProvider breaks Suspense in Next.js projects, even without suspended components

Description

When you add ChakraProvider to _app.tsx, any usage of Suspense breaks the app.

Link to Reproduction

https://codesandbox.io/s/nice-wood-50d2lj?file=/pages/index.tsx

Steps to reproduce

1. Create a vanilla Next.js app
2. Add a Suspense component with <p>Hello world</p> as children into pages/index.tsx
3. Verify it works fine (should)
4. Add @chakra-ui/react and <ChakraProvider> into _app.tsx
5. Reload the page - emits the following error:

Error: This Suspense boundary received an update before it finished hydrating. This caused the boundary to switch to client rendering. The usual way to fix this is to wrap the original update in startTransition.

Chakra UI Version

1.8.8 and @next

Browser

No response

Operating System

• macOS
• Windows
• Linux

Additional Information

No response

[dasdasdasd1232134]

(
    <EnvironmentProvider>
        <Suspense fallback={<Spinner />}>
            <ComponentThatSuspend />
        </Suspense>
    </EnvironmentProvider>
)

setNode(el) in EnvironmentProvider will cause it re-render, and the context value has changed from defaultEnv to { document, window } React recived an update during streaming rendering react doesn’t know if this update will affect the <ComponentThatSuspend /> component

So react will have to replace the server HTML with the suspense fallback. This is because it is stale

More detail: https://github.com/reactwg/react-18/discussions/38

I think we need refactor EnvironmentProvider to avoid the top-level updates during the app startup. @segunadebayo

[draqist]

This issue still persists and is still occurring, I tried wrapping my api call with a startTransition but it’s still isn’t working