useMediaQuery does not play well with dynamic components in Next.js

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live example:
https://codesandbox.io/p/sandbox/usemediaquery-and-suspense-ipi2y0

Steps:

1. Navigate to https://ipi2y0-3000.preview.csb.app/example for the reproduction of the error.
2. We can also produce the same error by updating states in useLayoutEffect https://ipi2y0-3000.preview.csb.app/possible-cause.
3. If updating states in useLayoutEffect is the root cause in this case, a possible fix is to wrap these functions in startTransition as in https://ipi2y0-3000.preview.csb.app/possible-fix

Current behavior 😯

Next.js emits the following error when useMediaQuery is used in a component with dynamically imported components.

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.

Expected behavior 🤔

There should not be any errors when using the hook with dynamically imported components.

Context 🔦

I am using useMediaQuery in a component with lazy-loaded components.

Your environment 🌎

 Browser: Google Chrome 109

 System:
    OS: Linux 5.15 Debian GNU/Linux 11 (bullseye) 11 (bullseye)
  Binaries:
    Node: 16.17.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 8.15.0 - /usr/local/bin/npm
  Browsers:
    Chrome: Not Found
    Firefox: Not Found
  npmPackages:
    @emotion/react: ^11.10.5 => 11.10.5 
    @emotion/styled: ^11.10.5 => 11.10.5 
    @mui/base:  5.0.0-alpha.114 
    @mui/core-downloads-tracker:  5.11.5 
    @mui/material: ^5.11.5 => 5.11.5 
    @mui/private-theming:  5.11.2 
    @mui/styled-engine:  5.11.0 
    @mui/system:  5.11.5 
    @mui/types:  7.2.3 
    @mui/utils:  5.11.2 
    @types/react: 18.0.26 => 18.0.26 
    react: 18.2.0 => 18.2.0 
    react-dom: 18.2.0 => 18.2.0 
    typescript: 4.9.4 => 4.9.4