styled-components don't rehyrdate properly in React Server Components

Link to the code that reproduces this issue

https://github.com/blairmcalpine/styled-components-repro

To Reproduce

1. Start the application (npm run dev)
2. Visit localhost:3000 and click the "Green (click to switch)" element. You'll see that the color doesn't change, despite the code properly swapping to a blue style. This is because the blue style is overridden with another green style:

This second green style is the result of two conflicting <style> tags generated by styled-components. One is generated on the initial doc request, and the second (and third) are adding during hydration - see the style tags marked with data-styled-version="6.1.11":

This can lead to completely incorrect styles of the page, if the second style tag contains different styles than the one in the head. While this issue is primarily with React Streaming and styled-components, we want to raise awareness here as NextJS officially "supports" styled-components, and the supported implementation doesn't work properly.

Current vs. Expected behavior

Expected Behaviour:
I expect styled-components <style> tags that are added later as a part of React Server Component hydration to be properly consolidated with the existing <style> tag.

Current Behaviour:
The <style> tag that is added to the DOM as a part of React Server Component hydration isn't combined with the <style> tag in the head, resulting in conflicting styles. Note that this is using the code from the docs.

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.5.0: Wed May  1 20:12:58 PDT 2024; root:xnu-10063.121.3~5/RELEASE_ARM64_T6000
  Available memory (MB): 32768
  Available CPU cores: 10
Binaries:
  Node: 20.12.0
  npm: 10.5.0
  Yarn: 1.22.22
  pnpm: N/A
Relevant Packages:
  next: 14.2.3
  eslint-config-next: 14.2.3
  react: 18.3.1
  react-dom: 18.3.1
  typescript: 5.4.5
Next.js Config:
  output: N/A

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

Developer Experience, Documentation

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

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

Additional context

I have created a related issue with styled-components here.

Start by running the linked reproduction with npm run dev and inspect src/app/client.page.tsx, using the Next.js CSS-in-JS documentation example as the reference setup. Compare the server-rendered and hydration-added styled-components tags, and read the related styled-components issue for context. Done means the existing and hydration-generated styles no longer conflict and the clicked element changes from green to blue.