How to change images' opacity in an array individually

Question

I just started learning JS and React, and need help with understanding how to access properties of images in arrays... I was able to figure out how to toggle the mapped images, but in the end, I couldn't figure out how to manipulate each individual image without getting a lot of errors on my console. I tried to use "index.length" to help me, but I'm missing a few steps in my logic.

I tried looking through the website, but I feel like I still can't understand where to begin.

import "./Products.css";

import product1 from "../src/images/image-product-1.jpg";
import product2 from "../src/images/image-product-2.jpg";
import product3 from "../src/images/image-product-3.jpg";
import product4 from "../src/images/image-product-4.jpg";

export default function ProductGallery() {
  let [mainImage, setMainImage] = useState(product1);

  let [opacity, setOpacity] = useState("");

  let images = [
    { photo: product1 },
    { photo: product2 },
    { photo: product3 },
    { photo: product4 },
  ];

  function clickImage(e) {
    setMainImage(e.target.src);
    setOpacity(!opacity);
    if ((e.target.style.opacity = 0.7)) {
      setTimeout(() => {}, 100);
    }
  }

  return (
    <div className='gallery col-md-6'>
      <img src={mainImage} alt='product shoes' className='main-image' />

      <section className='extra-images'>
        {images.map((image, index) => {
          return (
            <div key={index}>
              <img
                src={image.photo}
                onClick={clickImage}
                alt={index}
                style={{
                  opacity: opacity ? 0.7 : 1,
                }}
              />
            </div>
          );
        })}
      </section>
    </div>
  );
}