Dialog freeze when use state for open/show dialog

[fedyunin]

Hello!

` export default function MyDialog(props) {

const { open, onSave, onClose } = props;

return <Dialog open={open}>
    <DialogContent>
        <DialogHeader>
            Title
        </DialogHeader>
        <div>Dialog content here<div/>
        <DialogFooter>
            <Button type="button" onClick={onSave}>Save</Button>
            <Button type="button" variant="secondary" onClick={onClose}>
                Cancel
            </Button>
        </DialogFooter>
    </DialogContent>
</Dialog>

} `

Then I used this dialog in my other component where I use state for open/show Dialog:

` export default function Main() { const [open, setOpen] = useState(false);

const onShowDialog = () => {
    setOpen(true);
}

const onSave = () => {
// save data 
    setOpen(false);
}

const onClose = () => {
    setOpen(false);
}

return <div>
            <Menubar>
                <MenubarMenu>
                    <MenubarTrigger><MoreVertical /></MenubarTrigger>
                    <MenubarContent>
                        <MenubarItem onClick={onShowDialog}>Create</MenubarItem>
                    </MenubarContent>
                </MenubarMenu>
            </Menubar>
        <MyDialog open={open} onClose={onClose} onSave={onSave} />
      </div>

} `

When Click at menu item - Create, then dialog shows successfully. But when I try click at Save or Cancel - dialog freeze all page and unable to do any actions.

The same implementation works if I change Dialog to AlertDialog.