npm i fslightbox-react

Example Code

import React, { useState } from "react"

// Import FsLightBox
import ReactFsLightbox from "fslightbox-react";

// Import Image
import serves7 from "/assets/images/product/service-7.png"
import serves5 from "/assets/images/product/service-5.png"

const FsLightBox = () => {
    const FsLightbox = ReactFsLightbox.default
        ? ReactFsLightbox.default
        : ReactFsLightbox;

    const [imageController, setImageController] = useState({
        toggler: false,
        slide: 1,
    });

    function imageOnSlide(number) {
        setImageController({
            toggler: !imageController.toggler,
            slide: number,
        });
    }
    return (
        <>
            {/* import fslightbox */}
            <FsLightbox
                toggler={imageController.toggler}
                sources={[
                    serves7, serves5   //Add your image according to your requirement
                ]}
                slide={imageController.slide}
            />
            {/* Write your html code */}
            <Row>
                <Col >
                    {/* call imageOnSlide function */}
                <Link data-fslightbox="sidebar-gallery" onClick={() => imageOnSlide(1)} to="#"> 
                    <img src={serves7} className="img-fluid w-100" alt="profile-image"
                        loading="lazy" />
                </Link>
            </Col>
            <Col >
                <Link data-fslightbox="sidebar-gallery" to="#" onClick={() => imageOnSlide(2)} >
                    <img src={serves5} className="img-fluid w-100" alt="profile-image"
                        loading="lazy" />
                </Link>
                </Col>
            </Row>
        </>
    )
}

export default FsLightBox