My context for displaying modals works perfectly when used to display a single modal. However, when I try open a modal on top of a modal, nothing happens. Setting a breakpoint in showDialog reveals that the function is triggered when opening the first modal, but not for successive modals as long as the first one remains open. I do not understand this behavior. Why does it not trigger?

type DialogComponent = (onClosed: () => void) => JSX.Element;

interface DialogState {
    showDialog: (dialog: DialogComponent) => void;
    clearDialogs: () => void;
}

const DialogContext = createContext<DialogState>({
    showDialog: (_dialog) => {},
    clearDialogs: () => {},
});

export const useDialog = () => useContext(DialogContext);

export const DialogProvider = ({ children }: PropsWithChildren<{}>) => {
    const [dialogs, setDialogs] = useState<Array<DialogComponent>>([]);

    const showDialog = (dialog: DialogComponent) => {
        setDialogs([dialog, ...dialogs]);
    };

    const closeDialog = (dialog: DialogComponent) =>
        setDialogs(dialogs.filter((d) => d !== dialog));

    return (
        <>
            {dialogs.map((dialog) => (
                <div key={UniqueId()}>{dialog(() => closeDialog(dialog))}</div>
            ))}

            <DialogContext.Provider
                value={{
                    showDialog,
                    clearDialogs: () => setDialogs([]),
                }}
            >
                {children}
            </DialogContext.Provider>
        </>
    );
};