I have a useState inside div, I want to update the counter beacuse I want to get another img url from exArr array. is there a way to update counter inside a div?

let exArr = [];
    const [counter, setCounter] = useState(0);

    return (
        <div className="menRight">

            {
                products.filter(product => product.productGender.includes('Kids')).slice(0, showProducts).map(product => (                    
                    <div className="menRightCard">
                        <Link to={`/productBuy?id=${product.productImageFolder}`}>
                            <div className="menRightCardimg">
                                <i className="far fa-heart"></i>
                                <img src={exArr[counter]} alt="" />
  /* I WANT TO CHANGE HERE */   { setCounter(counter => counter + 1) }

                            </div>
                            <div className="menRightCardInfo">
                                <p className="productInfo">
                                    {product.productName}
                                </p>
                                <p className="productPrice">
                                    €{product.productPrice}
                                </p>
                            </div>
                        </Link>
                    </div>

                    
    
    ))
            }       
            <div className="loadMore">
                <button onClick={showMoreItems}>Load More Products</button>
            </div>
        </div>
    );
}