¡¡necesito ayuda por favor!!

la animación en la página de inicio de sesión se carga normal, pero cuando uso AuthRoute para verificar la autenticación, por ejemplo, un enlace ... no puedo ver la animación cuando redirecciono :(((

este es mi codigo

authRoute.tsx

 import { useAppSelector } from "app/hooks"; import { AnimatePresence } from "framer-motion"; import React from "react"; import { Navigate, Outlet,useLocation } from "react-router-dom"; interface Props {} const AuthRoute = (props: Props) => { const location = useLocation(); const userType = useAppSelector( (state) => state.LoginReducer.currentUser?.userType ); if (userType === "user") { return <Navigate to="/signUp" state={{from:location}} replace /> } else if (userType === "admin") { return <Navigate to="/admin" state={{from:location}} replace />; } else return <Outlet />; }; export default AuthRoute;

aplicación.tsx

 import { ThemeProvider } from "@mui/material/styles"; import { NotFound } from "component/common"; import { AnimatePresence } from "framer-motion"; import LoginPage from "pages/Login/Login"; import SignUpPage from "pages/SignUp/SignUp"; import React from "react"; import { useLocation } from "react-router"; import { Route, Routes } from "react-router-dom"; import AuthRoute from "Routes/AuthRoute"; import { lightTheme } from "theme"; import "./App.css"; function App() { const location = useLocation(); return ( <ThemeProvider theme={lightTheme}> <AnimatePresence exitBeforeEnter> <Routes location={location} key={location.pathname}> {/* check user at localstorage and redirect to login form */} {/* check user login and redirect to home page */} <Route element={<AuthRoute />}> <Route path="/login" element={<LoginPage />} /> </Route> <Route path="/signUp" element={<SignUpPage />} /> <Route path="*" element={<NotFound />} /> </Routes> </AnimatePresence> </ThemeProvider> ); } export default App;

Estoy realmente confundido ya que lo intenté de muchas maneras pero no funciona.