title: I keep getting the "Invalid hook call." error
body: <p>I am trying to make a navbar using react.js but i got this error:</p>
  <blockquote>
  <p>Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:</p>
  <ol>
  <li>You might have mismatching versions of React and the renderer (such as React DOM)</li>
  <li>You might be breaking the Rules of Hooks</li>
  <li>You might have more than one copy of React in the same app
  See <a href="https://reactjs.org/link/invalid-hook-call" rel="nofollow noreferrer">https://reactjs.org/link/invalid-hook-call</a> for tips about how to debug and fix this problem.</li>
  </ol>
  </blockquote>
  <p>This is my code in index.js</p>
  <pre><code>import { Nav, NavLink, NavMenu } from './NavbarElements'
  
  const Navbar = () =&gt; {
      return (
          &lt;&gt;
              &lt;Nav&gt;
                  &lt;NavLink to='/'&gt;
                      &lt;h1&gt;Logo&lt;/h1&gt;
                  &lt;/NavLink&gt;
                  &lt;NavMenu&gt;
                      &lt;NavLink to='/home' activeStyle&gt;
                          Home
                      &lt;/NavLink&gt;
                      &lt;NavLink to='/about' activeStyle&gt;
                          About
                      &lt;/NavLink&gt;
                  &lt;/NavMenu&gt;
              &lt;/Nav&gt;
          &lt;/&gt;
      );
  };
  
  export default Navbar;
  </code></pre>
  <p>and this is my code in NavbarElements.js</p>
  <pre><code>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;
  
      &amp;.active{
          color: #15cdfc;
      }
  `;
  export const NavMenu = styled.div`
      display: flex;
      align-items: center;
      margin-right: 24px;
  
      @media screen and (max-width:768px) {
          display: none;
      }
  `;
  
  </code></pre>
  <p>I am a really new programmer so I apologise in advance if I am making a stupid mistake. Thanks!</p>