How to setState after the page reloads

On mobile screen, the drop down navigation menu stays open even after a user has been directed to a page. I want it to close after any page reloads.

This is what i’ve tried in my navigation.jsx:

useEffect(() => {
    console.log("Open? ", open);
  }, [open]);

  useEffect(() => {
    if (window.performance.getEntriesByType) {
      if (
        window.performance.getEntriesByType("navigation")[0].type === "reload"
      ) {
        console.log("reloaded");
        setOpen(false);
      }
    }
  }, []);

I expected this to render every time the navigation pane re-renders but since its outsider of the browser router Navigation.jsx only renders once in the app unless there is a change in authentication etc because menu items change.

App.js

function App() {
  return (
    <>
      <BrowserRouter>
        <Navigation />
        <Routes>
//Bunch of code
        </Routes>
        <Footer />
      </BrowserRouter>
    </>
  );

I’m trying to figure out which dependencies to add or just how to go about ensuring that when there is a page reload(doesn’t matter which page) then setOpen(false).