how to get product id from sanity.io for every button that clicked in reactjs?

i'm trying to make product detail page but i am struggle to solve this problem. I fetch products from sanity.io and return the data using map. i want whenever i click the detail btn it's direct me to detail page and get the information of product

here is my code

const Products = () => {
  const [allProducts, setAllProducts] = useState([]);

  useEffect(() => {
    async function getAllProducts() {
      const allProduct = '*[_type == "product"]';
      const response = await client.fetch(allProduct);
      setAllProducts(await response);
    }
    getAllProducts();
  }, []);

  return (
    <>
      <Navbar />
      <div className="container-fluid ">
        <div className="row g-3 mb-5 ">
          {allProducts.map((product) => {
            console.log(product);
            return (
              <div className="col-12 col-md-3" key={product._id}>
                <div className="card">
                  <img
                    src={urlFor(product.image[0])}
                    className="card-img-top"
                    alt={product.name}
                  />
                  <div className="card-body">
                    <h1>${product.price}</h1>
                    <h5 className="card-title">{product.name} </h5>
                    <h6>{product.detail}</h6>
                    <div>
                      <Link to="/detail" className="btn btn-danger m-2">
                        Detail
                      </Link>
                    </div>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
        <Footer />
      </div>
    </>
  );
};