AnimatePresence exit prop not woking with react-router-dom

Question

the exit animation works fine when I'm not animating the routes.

here's my code, and one of the pages i'm trying to transition out of.

function App() {
    const location = useLocation();

    return (
        <>
        <Navbar/>
        <AnimatePresence exitBeforeEnter>
            <Routes location={location} key={location.pathname}>
                <Route path = '/' element = {<HomePage/>}/>
                <Route path='/Page2' element = {<Page2/>}/>
            </Routes>
        </AnimatePresence>
        </>
    );
}
export default App;

const HomePage = () => {

    return (
        <motion.div
            initial = {{x:'-100%'}}
            animate = {{x:0}}
            exit = {{x:'-100%'}}
            transition={{duration:1, ease:"anticipate", delay:0.2}}
            className='homepage'>HOME PAGE</motion.div>
    );
};

export default HomePage;