using app router, I have this folder structure:

lists
├── @modal
│   └── (.)new
│       └── page.tsx
├── new
│   └── page.tsx
├── layout.tsx
└── page.tsx

Shortly, what I would like to achieve: in lists page, I have a link that redirects me to lists/new, and by using a combination of intercepted and parallel routes, I want to show a dialog when navigating through this link (in (.)new page), while showing the actual new page when refreshing or navigating directly. From the modal I also want to be able to go back to list and have the modal closed, which is the thing that got me stuck.

First, I've created @modal/(.)new/page.tsx:

"use client";
...

const NewListModal: React.FC = () => {
  const [open, setOpen] = useState(true);
  const router = useRouter();

  return (
    <Dialog
      open={open}
      onOpenChange={() => {
        setOpen(!open);
        router.push("/lists");
      }}
    >
      <Button
        onClick={() => {
          setOpen(!open);
          router.push("/lists");
        }}
      >
        this should close the modal AND go back to the lists page
      </Button>
    </Dialog>
  );
};

and then I added the parallel route to layout:

export default function ListsLayout(
{children, modal}) {
  return (<>{children}{modal}</>);
}

Now, if I click the button in lists, the modal appears and when I click the button inside the modal I get redirected to lists (and modal gets closed as expected), but then if I try to reclick the button lists , the route change but the modal doesn't appear.
I think what's happening is that when I click the first time, the shallow route gets rendered and the opening state is false, but from that moment on it "keeps track" of what already happened (I guess the dialog is there but its opening state is false, as it was setted when closing the dialog the first time)

How can I avoid this? Ideally without moving the opening state to layout