Dynamically Imported Components unmount unexpectedly during Hydration if any parent React context updates

[Nandan1996]

Link to the code that reproduces this issue

https://codesandbox.io/p/devbox/dynamic-chunk-hydration-9fj3ys

To Reproduce

1. launch provided codesandbox link. copy preview url and open in new browser tab on desktop only.
2. try refreshing and you will see red color flash
3. check Header.tsx and FilterProvider.tsx file to understand behaviour of issue

Current vs. Expected behavior

Current Behaviour
The dynamically imported component(components imported using dynamic function from nextjs and ssr enabled) unmounts and re-renders on the client side during hydration when a parent React context updates, causing a flickering effect. the context update is happening by scheduling a state update in useEffect used in context resulting in change in value passed to a context provider.

Expected Behaviour
The dynamically imported component, once rendered on the server, should not unmount on the client side during hydration, even if a parent React context updates. The context update is happening in useEffect and that is not discouraged practise. it is useful to sync state from local storage or cookies.

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP PREEMPT_DYNAMIC Sun Aug  6 20:05:33 UTC 2023
  Available memory (MB): 4102
  Available CPU cores: 2
Binaries:
  Node: 20.11.1
  npm: 10.2.4
  Yarn: 1.22.19
  pnpm: 8.15.4
Relevant Packages:
  next: 14.2.1 // There is a newer version (14.2.3) available, upgrade recommended! 
  eslint-config-next: 14.2.1
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.4.5
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Lazy Loading

Which stage(s) are affected? (Select all that apply)

next dev (local), next build (local), next start (local)

Additional context

we've been facing this issue since app router was v13 But, we were not able create a minimal demo to reproduce this.