(NextJS/ReactJS) Delaying router pathName until after next-page-transitions is done

I have two separate things going on in a simple setup. I am using the following code:

className={router.pathname.startsWith("/pagename") ? "menu-active" : ""}

to assign the menu-active class to the pagename nav link when we’re on the pagename page.

And I am using

        <PageTransition timeout={450} classNames="page-transition">
      <Component {...pageProps} key={router.route} />
        </PageTransition>
        <style jsx global>{`
          .page-transition-enter {
            opacity: 0;
          }
          .page-transition-enter-active {
            opacity: 1;
            transition: opacity 450ms;
          }
          .page-transition-exit {
            opacity: 1;
          }
          .page-transition-exit-active {
            opacity: 0;
            transition: opacity 450ms;
          }
        `}</style>

pretty much verbatim from the next-page-transitions docs page, to have a 450ms fade to white between pages.

Here’s the problem. I use menu-active to change the font-style of the active page link to italics, and to change its color to orange. But when you change pages, it seems that the class is applied before the transition happens. In other words, you can see the menu change before the fade out to white even occurs.

I figured I could delay the transition by 450ms and then the change would happen right as the fade was finishing, and that works fine for the color change; but not for the font style. Since font style doesn’t work with transition-delay, I am trying to figure out some other way to delay the application of this class/style.

Perhaps I’m going about this all wrong though. Any recommendations?