text: import React, { useState, useCallback } from 'react';
  import Gallery from 'react-photo-gallery';
  import Carousel, { Modal, ModalGateway } from 'react-images';
  
  export default function GalleryComp(props) {
    const { photos } = props;
    const [currentImage, setCurrentImage] = useState(0);
    const [viewerIsOpen, setViewerIsOpen] = useState(false);
  
    const openLightbox = useCallback((event, { photo, index }) => {
      setCurrentImage(index);
      setViewerIsOpen(true);
    }, []);
  
    const closeLightbox = () => {
      setCurrentImage(0);
      setViewerIsOpen(false);
    };
    console.log(photos);
    return (
      <div>
        <Gallery photos={photos} onClick={() => console.log('checkk it')} />
        <ModalGateway>
          {viewerIsOpen ? (
            <Modal onClose={closeLightbox}>
              <Carousel
                currentIndex={currentImage}
                views={photos.map(x => ({
                  ...x,
                  srcset: x.srcSet,
                  caption: x.title,
                }))}
              />
            </Modal>
          ) : null}
        </ModalGateway>
      </div>
    );
  }
  