Mi Navbar.js es

 import { AppBar, makeStyles, Toolbar, Typography } from "@material-ui/core"; const useStyle = makeStyles({ header: { background: '#111111' } }) const Navbar = () => { const classes = useStyle(); return ( <AppBar className={classes.header }position="static"> <Toolbar> <Typography component="h2">Code for interview</Typography> <Typography component="h2">All Users</Typography> <Typography component="h2">Add User</Typography> </Toolbar> </AppBar> ); }; export default Navbar;

Mi App.js es

 import Navbar from "./components/Navbar"; import CodeForInterview from "./components/CodeForInterview"; import AllUsers from "./components/AllUsers"; import AddUsers from "./components/AddUsers"; import {BrowserRouter, Route, Routes} from 'react-router-dom'; import { render } from "@testing-library/react"; function App() { return ( <BrowserRouter> <Navbar/> <Routes> <Route path ="/" element = {<CodeForInterview/>}/> <Route path ="/all" element = {<AllUsers/>}/> <Route path ="/add" element = {<AddUsers/>}/> </Routes> </BrowserRouter> ); } export default App;

Estoy recibiendo el error:

Error: llamada de enlace no válida. Los ganchos solo se pueden llamar dentro del cuerpo de un componente de función. Esto podría suceder por una de las siguientes razones:

1. Es posible que tenga versiones que no coincidan de React y el renderizador (como React DOM)
2. Podrías estar rompiendo las Reglas de los Hooks
3. Es posible que tenga más de una copia de React en la misma aplicación