Estoy tratando de implementar react-router-dom en mi proyecto, pero cada vez que intento implementarlo como se describe en la documentación, solo provoca un montón de errores. Este es todo mi código:

 // App.js import { BrowserRouter, Routes, Route } from 'react-router-dom'; import Login from './Login'; export default function App() { return ( <BrowserRouter> <Routes> <Route path="/" element={<Login />} /> </Routes> </BrowserRouter> ); }

 // Login.js function Login() { return ( <div id="login"> <form> <input type="text" name="username" placeholder="Username" /> <input type="password" name="password" placeholder="Password" /> <input type="submit" value="Log in" /> </form> <p> Don't have an account? Sign up <a href="#">here</a> </p> </div> ); } export default Login;

 // index.js import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<App />);

Estas son capturas de pantalla de los errores: imagen 1 imagen 2 Estoy usando React 18.1.0 y la última versión react-router-dom

¿Qué estoy haciendo mal?