When I use useNavigate then show this error. How can I fixed this problem?

Question

WARNING in ./node_modules/bootstrap/dist/css/bootstrap.min.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./node_modules/bootstrap/dist/css/bootstrap.min.css) Module Warning (from ./node_modules/postcss-loader/dist/cjs.js):Warning

error: React Hook "useNavigate" is called in function "item" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use" react-hooks/rules-of-hooks

Search for the keywords to learn more about each error.

Webpack compiled with 1 error and 1 warning

Code:

import React from "react";
import { Button, Col } from "react-bootstrap";
import { useNavigate } from "react-router-dom";
import "./Item.css";

const item = ({ item }) => {
  const { _id, name, img, description, price } = item;

  const navigate = useNavigate();

  const navigateToItemDetail = (_id) => {
    navigate(/item/${_id});
  };

  return (
    <Col lg="4" className="text-center mb-5">
      <Button onClick={() => navigateToItemDetail(_id)}>
        Stock Update
      </Button>
    </Col>
  );
};

export default item;