Adding Lightbox Functionalty to a React Slick Slider built with json data

Question

I'm new to React. Trying to build a portfolio page with some functionality like lightboxes. The problem I'm having is to integrating lightbox with React Slick slider. It is an infinite slider with a thumbnail, a header and short description of the project. The react part is below.

<Slider className="rn-slick-arrow" {...infiniteCenterPortfolio}>
                    {PortfolioData.map((data, index) => (
                        <ScrollAnimation 
                        animateIn="fadeInUp"
                        animateOut="fadeInOut"
                        animateOnce={true}>
                        <div key={index} className="portfolio-slide-bg home-portfolio__global-container">
                            <div className="home-portfolio">
                                <div className="portfolio-slide-bg-child">
                                    <img src={data.image} alt="Portfolio"/>
                                </div>
                            </div>
                            <div className="container">
                                    <div className="row align-items-center">
                                        <div className="order-2 order-lg-1 col-lg-10">
                                            <div className="inner text-left">
                                                <div className="button-group mt--30">
                                                    <h4 className='title' dangerouslySetInnerHTML={{__html: data.title}}></h4>
                                                    <h5 className='description' dangerouslySetInnerHTML={{__html: data.company}}></h5>
                                                    <span className="description" dangerouslySetInnerHTML={{__html: data.description}}></span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                        </div>
                    </ScrollAnimation>
                    ))}
                </Slider>

It gets a json data as follows.

{
        "image": "/images/portfolio/homePortfolioThumbnail/projectOne-thumb.webp",
        "lightboxImage": "/images/portfolio/homePortfolioThumbnail/projectOneFull.webp",
        "title": "Project Title 1",
        "description": "Project description 1",
        "company": "Client Name 1"
},
{
        "image": "/images/portfolio/homePortfolioThumbnail/projectTwo-thumb.webp",
        "lightboxImage": "/images/portfolio/homePortfolioThumbnail/projectTwoFull.webp",
        "title": "Project Title 2",
        "description": "Project description 2",
        "company": "Client Name 2"
},
.
.
.

What I'm trying to accomplish is: when user clicks on the image, "lightboxImage" on the json file to be shown on the lightbox. And it should be array of images of the each "lightboxImage" images that can be found in the json file.

I've tried several different options but failed each time because of my lack of knowledge on the matter. I would really appreciate and suggestions that can lead me to build it. I want to know how to approach and solve a problem like this.