Анимация выхода Framer Motion не запускается с маршрутизатором Reach Router

Я создал базовое приложение Gatsby, которое использует клиентские маршруты с маршрутизатором Reach Router.

Я обновил свой gatsby-browser.js, чтобы отразить следующее:

export const wrapPageElement = ({ element }) => {
    <AnimatePresence exitBeforeEnter>{element}</AnimatePresence>
}

Вышеупомянутое предохраняет Animate Presence от размонтирования, и это позволяет работать как анимациям входа, так и выхода, но только для статических страниц, не использующих маршрутизатор охвата.

Анимация выхода не работает ни для каких статических страниц в моем каталоге /app, и я считаю, что это может иметь какое-то отношение к моему маршрутизатору:

import { Router } from '@reach/router'
const App = () => {
    return (
    <Router basepath="/app" primary={true}>
        <PageOne path="/one"/>
        <PageTwo path="/two"/>
    </Router>
    )
}
export default App

просто для контекста анимация кадрового движения выглядит следующим образом:

<motion.div
  variants={PAGE_TRANSITION_VARIANTS}
  initial={"initial"}
  animate={"animate"}
  exit={"exit"}
  transition={PAGE_TRANSITION}
>
  <img src={icon} alt="Gatsby icon" />
</motion.div>

Как уже говорилось, это прекрасно работает на статических страницах, но при просмотре страниц, маршрутизируемых маршрутизатором Reach, при выходе появляется анимация входа но не выхода.

Кто-нибудь сталкивался с этой проблемой и / или знает какие-либо возможные исправления? Может быть, это как-то связано с маршрутизатором охвата и местоположением?

Любое руководство или помощь приветствуются!