Hydration Error when using Chakra UI with NextJS and Turbopack enabled

Link to the code that reproduces this issue

https://github.com/MichaelvdVeer/repo-chakra-nextjs-with-turbopack

To Reproduce

I have an issue when using Chakra UI and Next.js with Turbopack enabled.

Is this issue caused by Next.js Turbopack or Chakra UI?

Steps to reproduce the Error:
Go to: https://github.com/MichaelvdVeer/repo-chakra-nextjs-with-turbopack
Follow the steps in the Readme file to reproduce the issue.

Current vs. Expected behavior

Current behavior:

With Turbopack enabled, an hydration error message appears:

Uncaught Error: Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:

- A server/client branch `if (typeof window !== 'undefined')`.
- Variable input such as `Date.now()` or `Math.random()` which changes each time it's called.
- Date formatting in a user's locale which doesn't match the server.
- External changing data without sending a snapshot of it along with the HTML.
- Invalid HTML tag nesting.

It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.

If you disable Turbopack and use Webpack, the error will disappear.

Expected behavior

With Turbopack enabled, no hydration error message appears.

Provide environment information

Operating System:
  Platform: darwin
  Arch: x64
  Version: Darwin Kernel Version 22.6.0: Thu Dec  5 23:45:11 PST 2024; root:xnu-8796.141.3.709.7~4/RELEASE_X86_64
  Available memory (MB): 8192
  Available CPU cores: 4
Binaries:
  Node: 22.13.1
  npm: 10.9.2
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 15.1.6 // Latest available version is detected (15.1.6).
  eslint-config-next: 15.1.6
  react: 19.0.0
  react-dom: 19.0.0
  typescript: 5.7.3
Next.js Config:
  output: N/A

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

Turbopack

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

next dev (local)

Additional context

The issue occurs locally when running the development server with Turbopack (npm run dev).

{
  "scripts": {
    "dev": "next dev --turbopack",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  }
}

Start with the linked reproduction repository and follow its README, then run the documented npm run dev command with Turbopack enabled. Compare the result with the Webpack development server and inspect the reported hydration mismatch. Done means the reproduction no longer emits the hydration error while Turbopack remains enabled.