如何将当前索引传递给react-image-lightbox？

import React, { useState } from 'react';
import Lightbox from 'react-image-lightbox';

const Gallery = () => {
  const images = [
    'image1.jpg',
    'image2.jpg',
    'image3.jpg'
  ];

  const [isOpen, setIsOpen] = useState(false);
  const [currentImageIndex, setCurrentImageIndex] = useState(0);

  const openLightbox = (index) => {
    setIsOpen(true);
    setCurrentImageIndex(index);
  };

  const closeLightbox = () => {
    setIsOpen(false);
  };

  const goToPrevious = () => {
    setCurrentImageIndex((currentImageIndex + images.length - 1) % images.length);
  };

  const goToNext = () => {
    setCurrentImageIndex((currentImageIndex + 1) % images.length);
  };

  return (
    <div>
      {images.map((image, index) => (
        <img
          key={index}
          src={image}
          alt={`Image ${index + 1}`}
          onClick={() => openLightbox(index)}
        />
      ))}

      {isOpen && (
        <Lightbox
          mainSrc={images[currentImageIndex]}
          nextSrc={images[(currentImageIndex + 1) % images.length]}
          prevSrc={images[(currentImageIndex + images.length - 1) % images.length]}
          onCloseRequest={closeLightbox}
          onMovePrevRequest={goToPrevious}
          onMoveNextRequest={goToNext}
          reactModalProps={{
            overlayClassName: 'your-custom-overlay',
            className: 'your-custom-lightbox'
          }}
        />
      )}
    </div>
  );
};

export default Gallery;