Hola a todos, soy nuevo en React y tengo un problema al usar el enlace useNavigate de react-router-dom v6. Estoy tratando de agregar la funcionalidad onClick a los botones para cambiar la ruta usando navegar, pero cada vez que hago clic en mi botón aparece este error Uncaught TypeError: navigate is not a function . Este es mi código simplificado si alguien puede ayudar.

Nav.js

 const Nav = () => { const { navigate } = useNavigate(); const itemsList = [ { text: "Home", icon: <InboxIcon />, onClick: () => navigate("/") }, { text: "Contact", icon: <MailIcon />, onClick: () => navigate("/contact") }, { text: "About", icon: <InboxIcon />, onClick: () => navigate("/about") }, ]; return ( <List> {itemsList.map((item, index) => { const { text, icon, onClick } = item; return ( <ListItem button key={text} onClick={onClick}> {icon && <ListItemIcon>{icon}</ListItemIcon>} <ListItemText primary={text} /> </ListItem> ); }) </List>

Aplicación.js

 function App() { return ( <div className="App"> <Nav /> <Routes> <Route exact path="/" element={<Main />} /> <Route exact path="/contact" element={<contact/>} /> <Route exact path="/about" element={<about/>} /> </Routes> </div> ); }

índice.js

 ReactDOM.render( <React.StrictMode> <BrowserRouter> <App /> </BrowserRouter> </React.StrictMode>, document.getElementById("root") );