What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

v2.2.9

What browser are you using?

Chrome

Reproduction URL

• https://github.com/iqqmuT/headlessui-dialog-unmount
• https://codesandbox.io/p/github/iqqmuT/headlessui-dialog-unmount/main?import=true

Describe your issue

Steps to reproduce:

1. Open the web app
2. Click Open dialog
3. Close the dialog
4. Click Go to another page
5. Click Go back
6. Click Open dialog

Expected outcome:
The dialog opens and looks the same as the first time.

Actual outcome:
The dialog opens behind the page container (which has opacity 95%).

This happens only when unmount={false} is given to Dialog component. It seems that <div id="headlessui-portal-root"> changes place in DOM when visiting another page in Next.js.

First:

<div class="relative..."><!-- page content --></div>
<div id="headlessui-portal-root">...</div>

After navigating to another page:

<div id="headlessui-portal-root">...</div>
<div class="relative..."><!-- page content --></div>