Next.JS with framer-motion does not change content on navigation

Question

I have the following Link on my index page that links to my About Us page:

<Link href="/about"><a>About us</a></Link>

in my _app.js file, I have this AnimatePresence wrapper:

<AnimatePresence exitBeforeEnter>
    <Component {...pageProps} key={router.route} />
</AnimatePresence>

Now, when I click my About Us link, the browser URL bar shows the new route, but the page content is still the index content.

But, when I remove the AnimatePresence wrapper, it works fine (no animation of course).

Why doesn't my animation work?

Answer 1

Ah issue is I need to wrap my components with a motion wrapper like:

<motion.div
                initial={{ opacity: 0 }}
                animate={{ opacity: 1 }}
                exit={{ opacity: 0 }}
            >