Separate images in react-image-lightbox

Question

I have a problem when using this library in some groups of images separately, what really happens is that it takes the list of images from the last group always when I click on another group of images:

const Projects = [
        {
            id: 1,
            name: 'Intercambiador Del Norte',
            images: [
                INorte,
                INorte2,
                INorte3,
                INorte4,
                INorte5
            ],
            address: {
                lat: 15.553887638630355,
                lng: -87.9969039384759
            },
        },
        {
            id: 2,
            name: 'Intercambiador De Occidente',
            images: [
                IOccidente,
                IOccidente2,
                IOccidente3,
                IOccidente4,
                IOccidente5
            ],
            address: {
                lat: 15.43197682825506,
                lng: -88.02134910151912
            },
        },
        {
            id: 3,
            name: 'Puente Peatonal IHSS',
            images: [
                IHSS,
                IHSS2,
                IHSS3,
                IHSS4,
                IHSS5
            ],
            address: {
                lat: 15.541246406040697,
                lng: -88.01537077792884
            },
        },
        {
            id: 4,
            name: 'Paso A Desnivel Col. Santa Martha',
            images: [
                StaMartha,
                StaMartha2,
                StaMartha3,
                StaMartha4,
                StaMartha5
            ],
            address: {
                lat: 15.497648696265482,
                lng: -87.98749457873993
            },
        },
        {
            id: 5,
            name: 'Puente A Desnivel 27 Calle',
            images: [
                Veintisiente,
                Veintisiente2,
                Veintisiente3,
                Veintisiente4,
                Veintisiente5
            ],
            address: {
                lat: 15.478059823233426,
                lng: -87.97416842866024
            },
        },
        {
            id: 6,
            name: 'Ampliación De Bulevar 33 Calle',
            images: [
                TreintaYTresCalle,
                TreintaYTresCalle2,
                TreintaYTresCalle3,
                TreintaYTresCalle4,
                TreintaYTresCalle5,
            ],
            address: {
                lat: 15.47188476038704,
                lng: -88.00512399419196
            },
        },
        {
            id: 7,
            name: 'Paso A Desnivel Blvd Del Este Con Salida Vieja A La Lima',
            images: [
                SdaLima,
                SdaLima2,
                SdaLima3,
                SdaLima4,
                SdaLima5
            ],
            address: {
                lat: 15.50228931099425,
                lng: -87.99440008840381
            },
        },
        {
            id: 8,
            name: 'Paso a Desnivel en la Intersección Bulevar Del Norte y Acceso A El Zapotal',
            images: [Zapotal,INorte2],
            address: {
                lat: 15.551436185695238,
                lng: -88.00215568011586
            },
        },
    ];

Another part of the code:

Projects.map(function(project, index) {
<Image onClick={() => setIsOpen(true)} loading="lazy" className="rounded-img img- 
  project shadow-three" src={project.images[0]} />
   {isOpen && (
      <Lightbox
          imageLoadErrorMessage="This image failed to load"
          imageTitle={project.name}
          mainSrc={project.images[photoIndex]}
          nextSrc={project.images[(photoIndex + 1) % project.images.length]}
          prevSrc={
          project.images[
            (photoIndex + project.images.length - 1) % project.images.length
          ]
          }
          onCloseRequest={() => setIsOpen(false)}
          onMovePrevRequest={() =>
             setPhotoIndex(
                           (photoIndex + project.images.length - 1) % project.images.length
                           )
                           }
              onMoveNextRequest={() =>
                  setPhotoIndex((photoIndex + 1) % project.images.length)
              }
        />
                                        
    )}
}

I know this could be a logic problem and not a library problem

Thanks in advance to everyone who takes their time

Answer 1

When you call lightbox you don't tell it which image group you want to show it. Here is an example of how you can do it.

you can see it on my codesandbox

  export default function App() {
    const [isOpen, setIsOpen] = useState(false);
    const [imagesIndex, setimagesIndex] = useState(null);
    const [photoIndex, setPhotoIndex] = useState(0);

    return (
      <>
        {Projects.map((project, index) => {
          return (
            <img
              key={project.id}
              onClick={() => {
                setIsOpen(true);
                setimagesIndex(index);
              }}
              loading="lazy"
              className="rounded-img img-project shadow-three"
              src={project.images[0]}
              alt={project.name}
            />
          );
        })}
        {isOpen && (
          <Lightbox
            imageLoadErrorMessage="This image failed to load"
            imageTitle={Projects[imagesIndex].name}
            mainSrc={Projects[imagesIndex].images[photoIndex]}
            nextSrc={
              Projects[imagesIndex].images[
                (photoIndex + 1) % Projects[imagesIndex].images.length
              ]
            }
            prevSrc={
              Projects[imagesIndex].images[
                (photoIndex + Projects[imagesIndex].images.length - 1) %
                  Projects[imagesIndex].images.length
              ]
            }
            onCloseRequest={() => {
              setIsOpen(false);
              setimagesIndex(null);
            }}
            onMovePrevRequest={() =>
              setPhotoIndex(
                (photoIndex + Projects[imagesIndex].images.length - 1) %
                  Projects[imagesIndex].images.length
              )
            }
            onMoveNextRequest={() =>
              setPhotoIndex(
                (photoIndex + 1) % Projects[imagesIndex].images.length
              )
            }
          />
        )}
      </>
    );
  }