Closing a nested `Dialog` also closes its parent `Dialog`

[lasseklovstad]

Version number

1.14.0

Description of the bug

When a Dialog is rendered as a JSX child of another Dialog (a natural pattern in React component composition), closing the inner dialog also triggers the outer dialog's onClose. This makes it impossible to compose dialogs without extra workarounds.

Steps To Reproduce

1. Compose two dialogs where the second is a JSX child of the first:

   const [outerOpen, setOuterOpen] = useState(true);
   const [innerOpen, setInnerOpen] = useState(false);
   
   <Dialog open={outerOpen} onClose={() => console.log("outer closed")}>
     <button onClick={() => setInnerOpen(true)}>Open inner dialog</button>
   
     <Dialog open={innerOpen} onClose={() => setInnerOpen(false)}>
       <button onClick={() => setInnerOpen(false)}>Cancel</button>
     </Dialog>
   </Dialog>

2. Click Open inner dialog to open the second dialog.

3. Click Cancel inside the inner dialog to close it.

4. Observe: the outer dialog also closes (console logs "outer closed"), even though nothing interacted with it.

Additional Information

No response