Modal inside modal: closing the first modal closes the second

[vicjune]

const FirstModal = ({ closeFirstModal }) => {
  const [openSecondModal] = useModal(() => <div>Second modal</div>);

  return (
    <div
      onClick={() => {
        openSecondModal();

        // This closes the second modal as well but it should not
        closeFirstModal();
      }}
    >
      First modal
    </div>
  );
};

const Page = () => {
  const [openFirstModal, closeFirstModal] = useModal(() => (
    <FirstModal closeFirstModal={closeFirstModal} />
  ));

  return <div onClick={openFirstModal}>Click me</div>;
};

In this situation, you click on the div Click me -> it displays First modal

Then when you click on the div First modal:

Expected behaviour: It should display Second modal and close FirstModal

What happens: It closes FirstModal and displays Second modal for a fraction of a second before closing it

[zbyte64]

Was looking for a "fire and leave" pattern, I have a menu item triggering a modal. This runs into the same problem here, the hook will cleanup, ie close the modal, when the parent component unmounts: https://github.com/mpontus/react-modal-hook/blob/master/src/useModal.ts#L64

Perhaps an optional flag could be added to disable the clean up?