react modal image doesn't show large size image when being clicked

Question

I have code below to display images in Image.Group with size prop to be set to "small". In side the Image.Group, I used ModalImage which is imported from react-modal-image. It is supposed to display large size photo when the image is clicked. But the fact is that when the image is clicked, it still shows the same size image as before. I know the problem is from size="small", and ModalImage simply inherits the prop from Image.Group. In this case, how can I overwrite the size to large in case the image is clicked?

<Image.Group size="small">
  {photos &&
    photos.map(photo => (
      <LazyLoad key={photo.name} height={150}>
        <ModalImage
          small={photo.url}
          large={photo.url}
          alt={photo.name}
          hideDownload={true}
          hideZoom={true}
        />;
      </LazyLoad>
    ))}
</Image.Group>

Before being clicked: After being clicked:

Answer 1

I think the issue is due to height={150} on Lazyload component.

if you want to show your image thumbnail of size 150px, then you can add a class name on ModalImage and apply CSS to that class name.

<LazyLoad key={photo.name}>  //Remove height here
   <ModalImage
      small={photo.url}
      large={photo.url}
      alt={photo.name}
      hideDownload={true}
      hideZoom={true}
      className="modal-image"    //Add a class name here
   />;
</LazyLoad>

Apply CSS to modal-image class,

.modal-image{
  max-height: 150px !important;
}

Demo