BrowserRouter causa una llamada inválida al gancho. Los ganchos solo pueden ser llamados dentro del cuerpo de un componente de función.

Estoy recibiendo el siguiente error al usar la versión 6 de react-router-dom:


Uncaught Error: Llamada de hook no válida. Los hooks solo se pueden llamar dentro del cuerpo de un componente de función. Esto podría ocurrir por una de las siguientes razones:
1. Es posible que tenga versiones incompatibles de React y el motor de representación (como React DOM).
2. Es posible que esté rompiendo las reglas de los hooks.
3. Es posible que tenga más de una copia de React en la misma aplicación.


Está diciendo que mi BrowserRouter es el problema, lo que parece indicar una incompatibilidad entre React y el motor de representación. Sin embargo, no puedo encontrar ningún problema. A continuación se muestra el fragmento de código que está causando el error:

import React from 'react';
import './App.css';
import { BrowserRouter, Route, Routes } from 'react-router-dom';
import Home from "./pages/Home";

function App() {
  return (
    <div>
      <browserrouter>
        <routes>
          <route path="/" element="{Home}/">
        </route></routes>
      </browserrouter>
    </div>
  );
}

export default App;

Al ejecutar npm ls react, obtengo lo siguiente:

├─┬ react-bootstrap@2.0.4
│ ├─┬ @restart/hooks@0.4.5
│ │ └── react@17.0.2 deduped
│ ├─┬ @restart/ui@0.2.5
│ │ ├─┬ @react-aria/ssr@3.1.0
│ │ │ └── react@17.0.2 deduped
│ │ └── react@17.0.2 deduped
│ ├─┬ prop-types-extra@1.1.1
│ │ └── react@17.0.2 deduped
│ ├─┬ react-dom@17.0.2
│ │ └── react@17.0.2 deduped
│ ├─┬ react-transition-group@4.4.2
│ │ └── react@17.0.2 deduped
│ ├── react@17.0.2
│ └─┬ uncontrollable@7.2.1
│   └── react@17.0.2 deduped
├─┬ react-router-dom@6.2.1 extraneous
│ └── react@17.0.2 deduped
└─┬ react-router@6.2.1 extraneous
  └── react@17.0.2 deduped

¡Estoy bloqueado por esto y cualquier ayuda sería muy apreciada! ¡Gracias!