Как сделать появление кнопки правильно с помощью хука useState - React js

У меня есть блоки с продуктами, и у них скрытая кнопка "Добавить в корзину", она появляется когда наводишь курсор к блоку. Проблема в том что, когда я навожу курсор то кнопка появляется у всех блоков сразу, а не на том в кого навел. Как сделать чтобы кнопка появлялась именно на том, на кого навел?

import React from "react";
import Link from "next/link";
import { urlFor } from "../lib/client";

const Product = ({ product: {image, name, slug, price} }) => {
  const [addCounter, setAddCounter] = React.useState(0);
  const addCartClick = () => {
    setAddCounter(addCounter + 1);
  };

  const [addCartButton, setAddCartButton] = React.useState(false);
 
  return (
    
    <div onMouseEnter={() => setAddCartButton(true)} onMouseLeave={()=>setAddCartButton(false)} className="product cu-p">
      <Link href={`/product/${slug.current}`}>
      <div >
        <p className="addtocart">Добавлено x{addCounter}</p>
        <img width={200} height={200} src={urlFor(image && image[0])} alt="" />

        <p className="productTitle">{name}</p>
        <span className="productDiscription">{price} ₸</span>
        <div className="creditTerms">
          <p>Кредит</p>
          <span>{Math.ceil(price / 60)} ₸ х 60 мес</span>
        </div>
        { addCartButton ? <button  onClick={addCartClick}>В корзину</button> : null}
      </div>
      </Link>
      </div>
     
  );
}

export default Product;