I was building a website using React. It's supposed that there are products that can be added to the cart by clicking "Add to Cart" button.

For now, I am just trying to access each "Add to Cart" button by console logging "action" in the reducer, but only one button among all of them can be triggered.

Code for Product

import {useStateValue} from "./StateProvider"

function Product({id, title, image, price, rating}) {
    //accepts props of each product
    
    const [state, dispatch] = useStateValue()

    const addToCart = () => {
        dispatch({
            type: "ADD_TO_CART",
            item: {
                id: id,
                title: title,
                image: image,
                price: price,
                rating: rating
            }
        }) 
    }

  return ( 
    <div className='product'>
        <div className="product-info">
            <p>{title}</p>
            <p className="product-price">
                <small>$</small>
                <strong>{price}</strong>
            </p>
            <div className="product-rating">
                {Array(rating)
                    .fill()
                    .map((_, i) => (
                        <p>