How to set up framer-motion in React Router Dom with its RouterProvider?

Question

I was not able to set up Framer Motion in React Router Dom version 6.8. The initial transition is working but not the exit at home page.

I am using createBrowserRouter and RouterProvider in the index.js file, and I have wrapped the page where I want the transition to occur. The code below is present:

const router = createBrowserRouter([
    { path: '/', 
     element: (
     <AnimatePresence mode='wait'>
         <Home key='/'/>
     </AnimatePresence>                        
               )
     }, { others pages... }, { others pages...}
])

I am wraping the main tag with motion.main in the home.jsx file, ex:

 <motion.main key={location.pathname} variants={pageTransition} initial='initial' animate='animate' exit='exit' className='home'>
    [ the content of the page ]
 </motion.main>