How to click on image in reactJS and display it full size

Web Development Front-End
,
1

I’ve built an image gallery with React, which displays all the images in the browser. However, I want to display any of the images in full size in the browser on click.
Below is the code.


import ReactImageMagnify from '@blacklab/react-image-magnify';
import galleryData from '../GalleryData';
import  '../App.css';

function Image(){
  const [images, setImages] = useState(galleryData);
  
    return(
         
        <div className="image-gallery" >
          <div className='image-container'>
            {images.map((image, index) => (
              <ReactImageMagnify 
              className={index === currentIndex ? 'active' : '' }
              activationInteractionHint='hover'
              imageProps={{
                src:image.url,
                width: 200,
                height: 200
              }}
              magnifiedImageProps={{
                src: image.url,
                width: 800,
                height: 800
              }}
              portalProps={{
                id: 'portal-test-id',
                horizontalOffset: 20
              }}
              />
          
         ))}
      </div>
      </div>
    );
 };
 export default Image;