Modal state not being set to closed after history.push in React

I have a slider that contains "Events" cards, and when the user clicks on a card a modal shows up. And inside the modal, there's a button that redirects the user to a registration form.

I'm using react-modal.

The problem is that when the user clicks on the button, the scroll bar disappears. And my conclusion is that the modal state is still set as open after changing the current page.

Here is an extracted code of the News component and inside of it you'll find the modal:

import Modal from "react-modal";


function News() {
const [modalIsOpen, setIsOpen] = React.useState(false);

const closeModal = () => {
    setIsOpen(false);
  };
 return (
     <Button onClick={() => setIsOpen(true}>
       Open Modal
     </Button>

        <Modal
          className="modal-class"
          isOpen={modalIsOpen}
          onRequestClose={closeModal}
        >

        <EventDetail 
            onCloseModal={
                () => setIsOpen(false), 
                modalIsOpen
            }
        />

        </Modal>
 )
}

this is the EventDetail :

function EventDetail (onCloseModal) {

const navigateToRegistrationForm = () => {
    console.log(onCloseModal);
    history.push(`${baseUrl}/registrationForm/${form.id}`) ;
}
 return (

   <Button onClick={navigateToRegistrationForm}>
       Register
   </Button>

 )
}

The console.log returns "true" which means the modal is still set as open. How Can I change its state when the "navigateToRegistrationForm" function is called?

You were pretty close to achieving this. All you need is basically pass closeModal function down to EventDetail component like so:

<EventDetail onCloseModal={closeModal} /> and then call it inside navigateToRegistrationForm