Prevent or Block navigation in ReactJs

Question

I have a page with two functions let's say start function and stop function, both are on-click functions once the start button is clicked I want to stop navigation so the user can't go to any other pages until he clicks the stop button I am currently using react-router prompt where it shows one modal to click if he wants to go or not. but I want to stop navigation until the stop button clicks. Kindly guide me on how to do it

React code:

const [isDataChanged,setDataChanged]=useState(false);

function start() {
setDataChanged(true)
}
function stop() {
setDataChanged(false)
}

In JSX:

<Prompt title="hello" when={isDataChanged} 
              message={()=>"The Inspection will be Stopped. Do you want to go Anyways?"}></Prompt>