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

Question

我无法在 React Router Dom 6.8 版中设置 Framer Motion。 初始过渡有效，但在 home 页面退出。

我在 index.js 文件中使用了 createBrowserRouter 和 RouterProvider，并且我已经将页面包装在我希望发生转换的位置。存在以下代码：

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

我在 home.jsx 文件中用 motion.main 包裹主标签，例如：

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