NextJS dynamic routing with modal reload causing overlay background to disappear

I have a very simple NextJS app where opening a page will update the URL but won't trigger a navigation and will instead display the content inside a modal. The URL still reflects the actual page location and any refresh brings the user there.

When the modal open, I want to still keep the original content off the page faded in the background and the modal should come to the front.

Right now when my modal opens, the original background content disappears rather than faded in the background.

I've replicated the issue in code-sandbox : https://codesandbox.io/s/replicating-backdrop-disappearing-rqt21?file=/pages/index.js

In the code-sandbox example, when you click the login button, you will see the modal works but the original background disappears. How can I get the background content to just be faded.

Please help.

from NextJS dynamic routing with modal reload causing overlay background to disappear