Estoy tratando de hacer una barra de navegación usando react.js pero recibí este 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 Consulte https://reactjs.org/link/invalid-hook-call para obtener consejos sobre cómo depurar y solucionar este problema.

Este es mi código en index.js

 import { Nav, NavLink, NavMenu } from './NavbarElements' const Navbar = () => { return ( <> <Nav> <NavLink to='/'> <h1>Logo</h1> </NavLink> <NavMenu> <NavLink to='/home' activeStyle> Home </NavLink> <NavLink to='/about' activeStyle> About </NavLink> </NavMenu> </Nav> </> ); }; export default Navbar;

y este es mi código en NavbarElements.js

 import { NavLink as Link } from 'react-router-dom'; export const Nav = styled.nav` background: #000; height: 80px; display: flex; justify-content: space-between; padding: 0.5rem calc((100wv - 1000px) /2); z-index: 10; `; export const NavLink = styled(Link)` color: #fff; display: flex; align-items: center; text-decoration: none; padding: 0 lrem; height: 100%; cursor: pointer; &.active{ color: #15cdfc; } `; export const NavMenu = styled.div` display: flex; align-items: center; margin-right: 24px; @media screen and (max-width:768px) { display: none; } `;

Soy un programador realmente nuevo, así que me disculpo de antemano si estoy cometiendo un error estúpido. ¡Gracias!