Вывод галерей в цикле

Как вывести несколько галерей в цикле, перепробовал уже "350" плагинов, ни один не решил мою проблему , может я что-то не так делаю, но суть такова , при клике на изображение у меня изменяется state и открывается lightbox, должен открываться один какой-то , а открываются все, и получается что последняя галерея перекрывает все остальные. Как решить эту проблему? Использую данный плагин

Вот код компонента:

import React, {Component} from "react";
import Swiper from "react-id-swiper";
import Lightbox from "react-images";

class ObjectGallery extends Component {

constructor(props) {
    super(props);

    this.swiper = null;
    this.state = {
        currentImage: 0,
        lightboxIsOpen: false

    };
    this.closeLightbox = this.closeLightbox.bind(this);
    this.gotoNext = this.gotoNext.bind(this);
    this.gotoPrevious = this.gotoPrevious.bind(this);
    this.openLightbox = this.openLightbox.bind(this);
    this.handleClickImage = this.handleClickImage.bind(this);
    console.log(props);
}

openLightbox(e, i) {
    e.preventDefault();
    // arr[i] = true;
    this.setState({
        currentImage: i,
        lightboxIsOpen: true,
    });
    console.log(i);
}
closeLightbox(e, i) {
    // arr[i] = false;
    this.setState({
        currentImage: 0,
        lightboxIsOpen: false,
    });
    console.log(i);
}
gotoPrevious() {
    this.setState({
        currentImage: this.state.currentImage - 1,
    });
}
gotoNext(e, i) {
    this.setState({
        currentImage: this.state.currentImage + 1,
    });
    console.log(i)
}
handleClickImage() {
    if (this.state.currentImage === this.props.images.length - 1) return;
    this.gotoNext();
}
renderGallery() {
    const PARAMS = {

        spaceBetween: 30,
        slidesPerView: 3,
        onInit: (swiper) => {
            this.swiper = swiper
        }
    };
    const GALLERY = this.props.gallerySlides.map((el, i) => {
        const IMAGES = el.PIC.map((img, i) => (

            {src: "http://gustae.рф" + img}

        ));

        return (
            <div key={i} className="gallery-slider">
                <span className="gallery-title">{el.NAME}</span>
                <Swiper {...PARAMS}>
                    {el.PIC.map((img, i) =>

                        <a key={i} href={img} onClick={(e) => this.openLightbox(e, i)}>

                            <img src={`http://gustae.рф${img}`} alt=""/>
                        </a>
                    )}

                </Swiper>
                <Lightbox
                    images={IMAGES}
                    isOpen={this.state.lightboxIsOpen}
                    onClickPrev={this.gotoPrevious}
                    onClickNext={this.gotoNext}
                    onClose={this.closeLightbox}
                    currentImage={this.state.currentImage}
                    onClickImage={this.handleClickImage}
                />
            </div>


        );

    });

    return (

        GALLERY
    );
}
render() {

    return (
        <div className="card-plan-gallery">
            <div className="hide-gallery ">

                {this.renderGallery()}

            </div>
            <div className="for-center-btn">
                <a href="javascript:void(0);" className="btn-more">
                    <div className="btn-more__icon"/>
                    <span>Планирови квартир</span>
                </a>
            </div>
        </div>
    );
}

}
export default ObjectGallery;