How to prevent internal navigation if user had unsaved changes in form in react

I am working on a reactjs web project where I am using react-router-dom version 5 and 6 and I wanted to show a confirmation dialog to user when user tries to navigate to other page using Link or navigate of react-router

<Link></Link>
const navigate=useNavigate()
navigate('/some-route')
  1. The beforeUnload only works if user tries to reload the page or
    close the tab or browser.
  2. useBlocker hook works only in react-router
    version 6.
  3. usePrompt hook works only in react-router version 5.

Please suggest a generic way that can be used for both react-router version 5 and 6.