list of products with a description menu

I have a product list on my page, in each product card, there is a small menu for information on the product. But when I click on a product info all the other products open the same menu.I think the problem comes from the useState , but I keyed the product id when clicking. Who could tell me what is wrong in my code. thanks in advance

const ListGammePastryComponent = () => {
  const dispatch = useDispatch();
  const getListPastry = useSelector(
    (state) => state?.reducerGammePastry?.state
  );
  const basket = useSelector((state) => state?.reducerBasket);
  const item = basket.basket;
  const [showIngredient, setShowIngredient] = useState(false);
  const [showCategorie, setShowCategorie] = useState(false);
  const [showAllergenes, setShowAllergenes] = useState(false)
  useEffect(() => {
  }, [basket, item, getListPastry]);

  const ShowDetails = (choice) => {
    if (choice === "ingredients") {
      setShowIngredient(true)
      setShowAllergenes(false)
      setShowCategorie(false)
    }
    if (showAllergenes) {
      setShowIngredient(false)
      setShowAllergenes(true)
      setShowCategorie(false)
    }
    if (choice === "categorie") {
      setShowCategorie(true)
      setShowIngredient(false)
      setShowAllergenes(false)
    }
  }
  return (
    <div className="container_listProduct">
      {getListPastry?.map((product) => {
        return (
          <div className="product_card" key={product?.id_patisserie}>
            <div className="card_icone_shop">
              <div className="icone_infoShop1">
                <BsShop className="icone_shop"/>
              </div>
              <div className="icone_infoShop">
                <p className="icone_infoShop-text">Click & Collect</p>
                <BiDownArrow className="icone_arrow"/>
              </div> 
            </div>
            <div className="product_card_img">
              <img
                className="card_img"
                crossorigin="anonymous"
                src={product?.imageUrl}
                alt="image pâtisserie"
              />
            </div>
            <div >
              <div >
                <h2 >{product?.nomProduit}</h2>
                <div >
                  <div >
                    <p onClick={()=>ShowDetails("categorie")}>Catégorie:</p>
                  </div>
                  <div >
                    <p onClick={()=>ShowDetails("ingredients")}>Ingrédients:</p>
                    
                    <p onClick={()=>ShowDetails("allergenes")}>Allergénes:</p>
  
                     {
                       showCategorie === true ? <p key={product.id_patisserie}>{product?.ingredients}</p>
                       : null
                     }
{
                       showAllergenes === true ? <p key={product.id_patisserie}>{product?.Allergenes}</p>
                       : null
                     }
{
                       showIngredient === true ? <p key={product.id_patisserie}>{product?.gammeProduit}</p>
                       : null
                     }
                    
                  </div>
                </div>
                </div>
              </div>
            </div>
          </div>
        );
      })}
    </div>
  );
};