Close Popover panel on page transition

[JamesSingleton]

I have added the following Tailwind UI component into my application https://tailwindui.com/components/marketing/elements/headers#component-1c0390a81b16cf5028aeff08be955766.

I have a SiteLayout.jsx that looks like

import Link from "next/link";
import { useRouter } from "next/router";
import { IntlProvider } from "react-intl";
import Header from "./Header";
import Footer from "./Footer";
import * as locales from "../../locale";

const SiteLayout = ({ children }) => {
  const router = useRouter();
  const { locale, defaultLocale, pathname, asPath } = router;
  const localeCopy = locales[locale];
  const messages = localeCopy[pathname] || localeCopy[asPath];

  return (
    <IntlProvider
      locale={locale}
      defaultLocale={defaultLocale}
      messages={localeCopy}
    >
      <div className="bg-white antialiased min-h-screen">
        <Header />
        <main className="overflow-hidden">{children}</main>
        <Footer />
      </div>
    </IntlProvider>
  );
};

export const getLayout = (page) => <SiteLayout>{page}</SiteLayout>;

export default SiteLayout;

The issue I am running into is that when I open one of the popoverrs and then click on one of the options to go to a different route, the popover stays open instead of closing.