在现有的React钩子库上实现Lightbox的最佳方法

import React, { useState, useEffect } from 'react';

const Lightbox = ({ images }) => {
  const [isOpen, setIsOpen] = useState(false);
  const [currentImage, setCurrentImage] = useState(null);

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

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

  useEffect(() => {
    const handleKeyPress = (event) => {
      if (event.key === 'Escape') {
        closeLightbox();
      }
    };

    document.addEventListener('keydown', handleKeyPress);

    return () => {
      document.removeEventListener('keydown', handleKeyPress);
    };
  }, []);

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

      {isOpen && (
        <div className="lightbox">
          <button className="close-button" onClick={closeLightbox}>
            Close
          </button>
          <img src={images[currentImage]} alt={`Image ${currentImage}`} />
        </div>
      )}
    </div>
  );
};

export default Lightbox;