Seperate nested dialogs

[spbui00]

I am trying to achieve dynamic loading components in my web application. The scenario is I have a Form in a Dialog and in this form, there is another dialog (like continue to another form dialog after filling in some fields). The expected behavior is that after clicking the continue button, it would trigger the opening of another dialog but also close its parent dialog.

What happens is that the child dialog closes as well when the parent's dialog closes. I have tried to use react portal to move the child dialog outside of the parents one, but then I realized that the dialogs are not mounted by default and forceMount is not designed to work in the case. So I am kind of stuck.

I need the possibility to load a dialog inside another dialog, but I don't know how could I move this to the DOM. I mean I could create my own dialog for better control but I wonder if there is a way to do this with radix ui.

Thank you for any suggestions.