`Transition` does not respect responsive `display` styles from the parent element

[anniegiang-octave]

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

2.0.4

What browser are you using?
Chrome Version 126.0.6478.114 (Official Build) (arm64)

Reproduction URL
https://kw6kvd-3000.csb.app/

Sandbox

Describe your issue

1. Open the reproduction URL above. You should see two texts that have colored backgrounds. Only the red one is rendered inside of a Transition.
2. In Chrome, open the inspector and toggle the device toolbar. Set the dimensions to be responsive.
3. Decrease the screen width until you know longer see both texts.
4. Increase the screen width until you see the yellow one.

Expected behavior:
In step 4, the red one should also appear at breakpoints greater than md as specified in the parent div but it doesn't appear.

It's worth noting that this issue does not happen with the React + Tailwind boilerplate sandbox and versions for the following packages:

"@headlessui/react": "2.0.4",
"react": "18.3.1",
"react-dom": "18.3.1"

https://n5lf4f-5173.csb.app/

Sandbox

[thecrypticace]

I get a "Devbox not found" error and "Unauthorized Preview" from your reproduction(s). Any chance you could update them?

[anniegiang-octave]

I get a "Devbox not found" error and "Unauthorized Preview" from your reproduction(s). Any chance you could update them?

@thecrypticace updated the sandbox links

[RobinMalfait]

This should be fixed by #3372, and will be available in the next release.

You can already try it using:

• npm install @headlessui/react@insiders.
• npm install @headlessui/vue@insiders.