I am trying to update my react-router-dom to v6, but it seems to be causing issues with framer motions AnimatePresence, specifically the exit transition.

In App.js:

import { Routes, Route } from "react-router-dom";

import {AnimatePresence} from "framer-motion";  



import Home from "./Components/Home";

import About from "./Components/About";

function App() {

  return (

    <div className="App">



      {/* globals such as header will go here  */}



      <AnimatePresence exitBeforeEnter>

        <Routes>

          <Route path="/" element={<Home />} />

          <Route path="about" element={<About />} />

        </Routes>

      </AnimatePresence>

    </div>

  );

}



export default App;

And then in my About/Home components I have:

import {Link} from "react-router-dom";

import {motion} from "framer-motion";  



    function About() {

    

        const pageMotion = {

            initial: {opacity: 0, x: 0},

            animate: {opacity: 1, x: 50, transition: {duration: 2}},

            exit: {opacity: 0, x:0, transition: {duration: 2}}

        };

    

        return (

            <div className="about">

                <motion.div initial="initial" animate="animate" exit="exit" variants={pageMotion}>about page</motion.div>

                <Link to="/">Go to home page</Link>

            </div>

        )

    }

    

    export default About

The "initial" and "animate" work fine, but exit is ignored, and immedietly jumps to the relevant page (rather than animating out first).

Note: I also have had to downgrade to framer-motion v4, as v5 does not work with Create-react-app.

Any help is appreciated.