NextJS App Layout wont animate on exit but does animate on initial.

[ahmetskilinc]

I currently have a NextJS app with a layout(MainLayout.tsx) that wraps my views. The layout has motion.div with initial, animate and exit on it with layoutId="MainLayout".

The AnimatePresence is on the _app.tsx file with exitBeforeEnter on it. However it will not animate before exit, it only does the initial -> animate part.

// _app.tsx
<AnimatePresence exitBeforeEnter>
  <Component {...pageProps} />
</AnimatePresence>

// MainLayout.tsx
<motion.div
  layout
  initial={{ opacity: 0, y: -80 }}
  animate={{ opacity: 1, y: 0 }}
  exit={{ opacity: 0, y: 80 }}
  layoutId="MainLayout"
>
  <main>{props.children}</main>
</motion.div>

There is no other motion element/component in my app.