Animationpresence doesn't apply exit animation on routes

I new to framer motion, and I'm trying to make an exit transition between two routes when I go from one route to another, the Home route and the Signup route. Apparently the only animations that work are the animations when the components get mounted but not the exit animations, even though i use the AnimatePresence component This is the code for the index.js file :

import React from 'react';
import ReactDOM from 'react-dom';
import {
  BrowserRouter as Router,
  Routes,
  Route,
  Link,
  useLocation
} from "react-router-dom";
import App from './App';
import { AnimatePresence } from 'framer-motion'
ReactDOM.render(
  <React.StrictMode>
    <Router>
      <App />
    </Router>
  </React.StrictMode>,
  document.getElementById('root')
);

This is the code for the app.js file:

import React, { createContext, useState, useContext, useEffect, useReducer, useRef } from 'react';
import './style.css'
import {
  BrowserRouter as Router,
  Routes,
  Route,
  Link,
  useLocation
} from "react-router-dom";
import { motion, AnimatePresence } from 'framer-motion';
import Home from './Home';
import Signup from './Signup'
import Shop from './Shop';

export default function App() {
  const location = useLocation();
  return (
      <AnimatePresence exitBeforeEnter>
        <Routes location={location} key={location.pathname}>
          <Route path='/' element={<Home />} />
          <Route path='/signup' element={<Signup />} />
          <Route path='/shop' element={<Shop />} />
        </Routes>
      </AnimatePresence>
  );
}

This is the code for the Home route component :

import React, { useContext } from 'react';
import { pageInfo } from './App';
import './style.css'
import { motion, AnimatePresence } from 'framer-motion';
const variantss = {
    hidden: {
        opacity: 0,
        x: '-100vw'
    },
    visible: {
        opacity: 1,
        x: 0,
        transition: {
            type: 'spring',
            
        }
    },
    exit: {
        x: '-100vw',
        transition: {
            ease: 'easeInOut'
        }
    }
}
export default function Home() {
    return (
        <AnimatePresence>
            <motion.div
                className="home"
                variants={variantss}
                initial='hidden'
                animate='visible'
                exit='exit'
            >
                <h1>Hello this is the home page title</h1>
                <p>Hello the is the home page content</p>
            </motion.div>
        </AnimatePresence>
    );
}

And this is the code for the Signup route component:

import React, { useContext, useRef } from 'react';
import { pageInfo } from './App';
import './style.css'
import { motion, AnimatePresence } from 'framer-motion';
const variantss = {
    hidden: {
        opacity: 0,
        x: '-100vw'
    },
    visible: {
        opacity: 1,
        x: 0,
        transition: {
            type: 'spring',

        }
    },
    exit: {
        x: '-100vw',
        transition: {
            ease: 'easeInOut'
        }
    }
}
export default function Signup({ userSignUp }) {
    return (
        <motion.div
            variants={variantss}
            initial='hidden'
            animate='visible'
            exit='exit'
        >
            <h1>Hello this is the signup page title</h1>
            <p>Hello the is the signup page content</p>
            <form action="">
                <div>
                    <label htmlFor="name">
                        Type your name
                        <input type="text" id='name' />
                    </label>
                </div>
                <div>
                    <label htmlFor="nickname">
                        Type your nickname
                        <input type="text" id='nickname' />
                    </label>
                </div>
                <input type="submit" value='Sign up' />
            </form>
        </motion.div>
    );
}