I am using react slick in my Websites. I have 4 slides. Every Slide, I want a onClick Function to get the value. But When I click on the Slide, I am getting the last value only. I searched Stack Overflow but can't find solutions.

Here's the Code:

const productSlideImg = [
  { Img: prodImg1, ImgName: "img1", pageLink: "/home" },
  { Img: prodImg2, ImgName: "img2", pageLink: "/about" },
  { Img: prodImg3, ImgName: "img3", pageLink: "/contact" }
];


const handleClickSlide = (item) => {
    console.log(item); // getting "img3" only on every slide click

  };


<Slider
    autoplay={true}
    slidesToShow={1}
    slidesToScroll={1} >

            {productSlideImg.map((item, index) => (
              <div   >
                <img
                  style={{ borderRadius: "50px" }}
                  width={"100%"}
                  src={item.Img}
                  onClick={() => {handleClickSlide(item.ImgName) }}
                 
                />
              </div>
            ))}

          </Slider>

Please help me with some solutions