Firefox and Safari don’t work with window.navigation, what are some workarounds?

I've set up my nav to highlight different headings depending on where you are on my website using window.navigation. This works on chrome and edge, but not on firefox or safari.

Any ideas on a workaround?

Code I need to replace below:

useEffect(() => { window.navigation.addEventListener("navigate", (event) => { const url = event.destination.url if (url.includes('example.pdf')) { setPage('example') } else { const splitUrl = url.split('#') setPage(splitUrl[1]) } }) }, [])