Consulta PopUps en react

[MystEdu]

Buenas, he estado intentando añadir un pop-up de confirmación al querer salir de una página en específico en el proyecto pero no me está funcionando correctamente.

Cree un repositorio con un ejemplo simulando este caso. https://github.com/MystEdu/ConfirmationPopUp

El problema que tengo es que intento mostrar un pop-up cada vez que se quiere salir de una página específica para actualizar algunos datos en este caso, pero solo me muestra el pop-up cuando recargargo la página y no cuando voy a otra página usando la navbar.

Dentro de esta página uso un useEffect para saber cuando se quiere salir de esta.

https://github.com/MystEdu/ConfirmationPopUp/blob/54c257f59b850ddb04a6f9e2ce0711582a4ab97a/src/pages/Room.jsx#L16

En la navbar uso Link para que el cambio de páginas sea rápido y no haga todo el proceso de cargar de nuevo.

https://github.com/MystEdu/ConfirmationPopUp/blob/54c257f59b850ddb04a6f9e2ce0711582a4ab97a/src/components/navbar/Navbar.jsx#L6

Otras soluciones que encontré era usar el componente Promp o hacer uso de algunos hooks, pero no están disponibles en las versiones que estamos usando en el proyecto.

Se me ocurre como soluciones alternativas usar botones en la navbar y añadir algún state en un Context para usar un condicional que muestre la confirmación al estar dentro de la página objetivo. Lo otro que se me ocurre es directamente sacar la navbar y permitir el salir de esa página solo con los botones disponibles ahí.

No quiero recurrir todavia a estas soluciones pensando que existe alguna forma de mostrar el pop-up manteniendo la estructura.

¿Me podrían ayudar?