How to wait for function to be called?

Hi, I am trying to inform the user that there are unsaved changes if they try to complete any action which will cause data loss, I have managed to achieve this with window.confirm as it blocks all code execution. Using similar logic plus a Context I am able to get a custom modal to open but the code still keeps running and the navigation happens anyway.

How can I stop all flow until a response from the user is received? My idea was to add an event listener on the method call I am expecting so once the modal is closed the flow would continue, can’t seem to find any useful documentation on this.

Pseudo code:

// App.tsx const { unsavedChanges, isOpen, onOpen, onClose } = useContext(UnsavedChangesContext); return ( <> <SomeComponent /> <MyModal isOpen={isOpen} onClose={onClose} /> </> ) // SomeComponent.tsx const { unsavedChanges, isOpen, onOpen, onClose } = useContext(UnsavedChangesContext); return ( … rest of component … <Button onClick={() => { if (unsavedChanges) { onOpen(); // opens modal // How do I wait for onClose() to run? // onClose() runs when a user response ‘Continue’ or just closes // the modal // Is there some sort of listener/subscribe I can have? continueAction(); // changes active value } else { continueAction(); } }} >Change active item</Button> … rest of component … )