App Router Styled Components Bug when using ThemeProvider

Link to the code that reproduces this issue

https://github.com/moriahmaney/styled-components-bug-next

To Reproduce

start application yarn dev
navigate to http://localhost:3000/test
observe that client component renders with the theme applied, but there is a warning in the console about a class name mismatch:

Current vs. Expected behavior

I expected there to be no className mismatch when using a ThemeProvider with a StyledComponentsRegistry when following the instructions in the documents here: https://nextjs.org/docs/app/building-your-application/styling/css-in-js#styled-components

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.4.0: Fri Mar 15 00:12:49 PDT 2024; root:xnu-10063.101.17~1/RELEASE_ARM64_T6020
  Available memory (MB): 32768
  Available CPU cores: 12
Binaries:
  Node: 18.18.0
  npm: 9.8.1
  Yarn: 1.22.22
  pnpm: 8.8.0
Relevant Packages:
  next: 14.2.4 // Latest available version is detected (14.2.4).
  eslint-config-next: 14.2.4
  react: 18.3.1
  react-dom: 18.3.1
  typescript: 5.5.2
Next.js Config:
  output: N/A

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

Not sure

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

next dev (local)

Additional context

No response

vercel / next.js

App Router Styled Components Bug when using ThemeProvider #67155