title: useNavigate is giving an error -- React Hook "useNavigate that is neither a React function component nor a custom React Hook function
body: <pre><code>import React from &quot;react&quot;;
  import { Button, Card } from &quot;react-bootstrap&quot;;
  import { useNavigate } from &quot;react-router-dom&quot;;
  
  const bookCard = ({ book }) =&gt; {
    const handleNavigate = id =&gt; {
      const navigate = useNavigate();
      navigate(`inventory/${id}`)
    }
    return (
      &lt;div className=&quot;col-md-4 my-3 text-start&quot;&gt;
        &lt;Card style={{ width: &quot;18rem&quot; }}&gt;
          &lt;Card.Img variant=&quot;top&quot; src={book.img} /&gt;
          &lt;Card.Body&gt;
            &lt;Card.Title&gt;{book.name}&lt;/Card.Title&gt;
            &lt;Card.Text&gt;{book.description}&lt;/Card.Text&gt;
            &lt;p&gt;
              &lt;b&gt;Price&lt;/b&gt; : {book.price}
            &lt;/p&gt;
            &lt;p&gt;
              &lt;b&gt;Quantity&lt;/b&gt; : {book.quantity}
            &lt;/p&gt;
            &lt;p&gt;
              &lt;b&gt;Supplier&lt;/b&gt; : {book.supplier}
            &lt;/p&gt;
            &lt;Button onClick={()=&gt;handleNavigate(book._id)} variant=&quot;primary&quot;&gt;Update Item&lt;/Button&gt;
          &lt;/Card.Body&gt;
        &lt;/Card&gt;
      &lt;/div&gt;
    );
  };
  
  export default bookCard;
  
  </code></pre>
  <p>I used useNavigte before but this is the first time i am facing this problem .
  Here i am trying to use a fucnction for navigationg to my dynamic route setted with my ID .</p>