No entiendo por qué aparece el error. Mi tarea es hacer animación entre Rutas. ¿Puede sugerir dónde cometí un error? ingrese la descripción de la imagen aquí Uso el paquete react-spring, lo reinstalé pero nada ayudó

 import React from 'react'; import { Routes, Route, useLocation } from 'react-router-dom'; import { useTransition, animated } from 'react-spring' import Home from './Home/Home'; import Signup from './Form/Signup'; import Login from './Form/Login'; import Reset from './Form/Reset'; import Shop from './Shop/Shop'; import Dash from './../pages/Dashboard/Dashboard'; const Main = () => { const location = useLocation(); const transitions = useTransition(location, location => location.pathname, { from: { opacity: 0, transform: 'translate3d(100vw, 0, 0)' }, enter: { opacity: 1, transform: 'translate3d(0, 0, 0)' }, leave: { opacity: 0, transform: 'translate3d(-20vw, 0, 0)' }, }); return transitions.map(({ item: location, props, key }) => ( <> <animated.div key={key} style={props}> <Routes location={location}> <Route path='/' element={<Home/>} /> <Route exact path='/signup' element={<Signup/>}/> <Route exact path='/login' element={<Login/>}/> <Route exact path='/dashboard' element={<Dash/>}/> <Route exact path='/reset-password' element={<Reset/>}/> <Route exact path='/shop' element={<Shop/>}/> </Routes> </animated.div> </> )); }; export default Main;