对不起，我的英语。所以，我是初学者的React，我有一个问题，我的React的画廊。当我点击图片，图片返回两次。例如，如果我点击第一张图片，然后在第二，第二将是第一张图片，再次点击正确的图片返回。我该怎么办？我要疯了。谢谢大家...！
JSX：

import react, { useEffect } from "react";
import { useState } from "react";
import "./galleryCards.css";
import { FullScreen, useFullScreenHandle } from "react-full-screen";
import image1 from "./1.jpg";
import image2 from "./2.jpg";
import image3 from "./3.jpg";
import image4 from "./4.jpg";
import image5 from "./5.jpg";
import image6 from "./6.jpg";

const images = [
  { image: image1, alt: "image1", id: 1 },
  { image: image2, alt: "image2", id: 2 },
  { image: image3, alt: "image3", id: 3 },
  { image: image4, alt: "image4", id: 4 },
  { image: image5, alt: "image5", id: 5 },
  { image: image6, alt: "image6", id: 6 },
];

const GalleryCards = (props) => {
  const [id, setId] = useState(1);
  const [selectedImage, setSelectedImage] = useState();
  const [isClicked, setIsClicked] = useState(false);

  const GetImage = (e) => {
    const imageId = e.target.getAttribute("data-id");
    setId(imageId);
    const selectedImg = images.find((el) => {
      return el.id == id;
    });

    setSelectedImage(selectedImg);

    setIsClicked(!isClicked);
    document.body.style.overflow = "hidden";
  };
  return (
    <>
      <div
        className={` ${isClicked ? "gallery_overlay" : ""}`}
        onClick={() => {
          if (isClicked === true) {
            setIsClicked(false);
            document.body.style.overflow = "scroll";
          }
        }}
      >
        <div className="cardsgallery_container">
          {images.map((el) => {
            return (
              <div
                className={`gallery_item ${
                  isClicked ? "gallery_item_hidden" : ""
                }`}
                key={el.id}
              >
                <img
                  data-id={el.id}
                  alt={el.alt}
                  className="gallery_image"
                  src={`${el.image}`}
                  width={363}
                  height={380}
                  onClick={GetImage}
                ></img>
              </div>
            );
          })}
        </div>
        <div className="image_overlay">
          {" "}
          <img
            src={isClicked ? selectedImage.image : ""}
            className={`selected_image ${
              isClicked ? "img_show" : "img_hidden"
            }`}
          ></img>
        </div>
      </div>
    </>
  );
};
export default GalleryCards;

CSS：

.gallery_item {
  height: 380px;
  width: 363px;
  position: relative;
  left: 120px;
  bottom: -500px;
  z-index: 100;
  display: block;
}
.gallery_item_hidden {
  display: none;
}

.cardsgallery_container {
  display: flex;
  flex-wrap: wrap;
  width: 1400px;
  justify-content: center;
  align-items: center;
  position: bottom;
  bottom: -500px;
  left: 300px;
  z-index: -100;
}
.gallery_overlay {
  z-index: 100;
  background-color: black;
  height: 2000px;
}
.image_overlay {
  z-index: 200;
}

.selected_image {
  position: relative;
  left: 700px;
  width: 500px;
  height: 500px;
  z-index: 300;
  border: none;
  bottom: -500px;
}
.img_hidden {
  display: none;
}
.img_show {
  display: block;
}
.x {
  z-index: 300;
  color: white;
}