How to add light box on react - reactjs

Question

I'm trying to use the Simple React Lightbox (SRL), from https://www.npmjs.com/package/simple-react-lightbox, but I it doesn't work. It seems simple but I guess I'm doing something wrong. I want when I click the image link, a light box with the same image to open. I tried making my own lightbox in different component but it still doesn't work.
my code
import logo from './movieBrowser.jpg';
import logo2 from './portfolio-2.jpg';
import logo3 from './portfolio-3.jpg';
import logo4 from './portfolio-4.jpg';
import { SRLWrapper } from "simple-react-lightbox";
const Projects = () =>{
return(
<div id="project">
<div className="container-fluid p-2 mb-0 ">
<div className="row g-0 m-4">
<SRLWrapper>
<div className="col-lg-4 col-sm-6 p-1">
<a className="portfolio-box" href={logo3} title="Project Name">
<img className="img-fluid" src={logo3} alt="ptoject name" />
<div className="portfolio-box-caption">
<div className="project-category text-white-50">Category</div>
<div className="project-name">Project Name</div>
</div>
</a>
</div>
</SRLWrapper>
<div className="col-lg-4 col-sm-6 p-1">
<a className="portfolio-box" href={logo4} title="Project Name">
<img className="img-fluid" src={logo4} alt="..." />
<div className="portfolio-box-caption">
<div className="project-category text-white-50">Category</div>
<div className="project-name">Project Name</div>
</div>
</a>
</div>
<div className="col-lg-4 col-sm-6 p-1">
<a className="portfolio-box" href={logo2} title="Project Name">
<img className="img-fluid" src={logo2} alt="..." />
<div className="portfolio-box-caption">
<div className="project-category text-white-50">Category</div>
<div className="project-name">Project Name</div>
</div>
</a>
</div>
<div className="col-lg-4 col-sm-6 p-1">
<a className="portfolio-box" href={logo} title="Project Name">
<img className="img-fluid" src={logo} alt="..." />
<div className="portfolio-box-caption">
<div className="project-category text-white-50">Category</div>
<div className="project-name">Project Name</div>
</div>
</a>
</div>
<div className="col-lg-4 col-sm-6 p-1">
<a className="portfolio-box" href={logo4} title="Project Name">
<img className="img-fluid" src={logo4} alt="..." />
<div className="portfolio-box-caption">
<div className="project-category text-white-50">Category</div>
<div className="project-name">Project Name</div>
</div>
</a>
</div>
<div className="col-lg-4 col-sm-6 p-1">
<a className="portfolio-box" href={logo3} title="Project Name">
<img className="img-fluid" src={logo3} alt="..." />
<div className="portfolio-box-caption p-3">
<div className="project-category text-white-50">Category</div>
<div className="project-name">Project Name</div>
</div>
</a>
</div>
</div>
</div>
</div>
)
}
export default Projects;