React-router-dom (v6) con Framer Motion (v4)

Estoy tratando de actualizar mi react-router-dom a la versión 6, pero parece estar causando problemas con AnimatePresence de framer motions, específicamente con la transición de salida.

En 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 (

);
}

export default App;

Y luego en mis componentes About/Home tengo:

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 (

);
}

export default About;

Los valores “initial” y “animate” funcionan bien, pero “exit” es ignorado y salta inmediatamente a la página relevante (en lugar de animarse primero).

Nota: También tuve que retroceder a framer-motion v4, ya que la v5 no funciona con Create-react-app.

Cualquier ayuda es apreciada.