This is my code for react custom prompt, please help to clearify the mistake. here I’m trying to render this when we switch to a different route. but everytime when i switch to different route it doesn’t render. it render only when i click on the same nav link in navbar

import { useState, useEffect, useRef } from "react";
import { Prompt, useLocation, useHistory } from "react-router-dom";
import { Box, Modal, Typography, Button } from "@material-ui/core";
import ModalWrapper from "./modal-container";

export function ReactPrompt(props: {
  content: string;
  title: string;
  isBlocked: boolean;
}) {
  const { content, title, isBlocked } = props;
  const [isModalOpen, setIsModalOpen] = useState(false);
  const location = useLocation();
  const history = useHistory();
  const [lastLocation, setLastLocation] = useState<any>(location);
  const [shouldUnload, setShouldUnload] = useState(false);
  const [confirmedNavigation, setConfirmedNavigation] = useState(false);

  const closeModal = () => {
    setIsModalOpen(false);
    setShouldUnload(false);
  };

  const openModal = () => {
    setIsModalOpen(true);
    console.log(isBlocked, isModalOpen)
  };

  const showModal = (nextLocation: string) => {
    console.log(nextLocation, isBlocked, isModalOpen)
    openModal();
    setLastLocation(nextLocation);
  };

  const handleBlockedRoute = (nextLocation: string): boolean => {
    
    if (!confirmedNavigation && isBlocked) {
      showModal(nextLocation);
      console.log(nextLocation, isBlocked, isModalOpen)
      return false;
    }
    return true;
  };

  const handleConfirmNavigationClick = () => {
    closeModal();
    setConfirmedNavigation(true);
  };

  // Block react routes
  useEffect(() => {
    if (confirmedNavigation && lastLocation) {
      // Navigate to the previous blocked location with your navigate function
      setShouldUnload(true);
      history.push(lastLocation.pathname);
    }
  }, [confirmedNavigation, lastLocation, history]);

  // Block non-react routes
  useEffect(() => {
    const unload = (event: { returnValue: string }) => {
      if (isBlocked && !shouldUnload) {
        // eslint-disable-next-line no-param-reassign
        event.returnValue = content;
      }
      if (shouldUnload) {
        // eslint-disable-next-line no-param-reassign
        event.returnValue = "";
      }
    };
    window.addEventListener("beforeunload", unload);

    return () => window.removeEventListener("beforeunload", unload);
  }, [isBlocked, content, shouldUnload]);

  console.log(isModalOpen)
  return (
    <>
    <Prompt when message={handleBlockedRoute} />
    {isModalOpen && (<ModalWrapper open = {isModalOpen} onClose={closeModal}>
      <Box>
        <h1>{content}</h1>
        <Button size="large" color="primary" variant="outlined" onClick={closeModal}>
          Discard Changes
        </Button>
        <Button variant="contained" color="primary" onClick={handleConfirmNavigationClick}>
          save
        </Button>
      </Box>
    </ModalWrapper>)}
    </>
  );
}

I want rendering this in my component like this, what could be the issue with this?

 <ReactPrompt content="You have unsaved changes on this page." isBlocked ={isDirty}></ReactPrompt>