Merge React slicks and LightGallery

Question

Hit. I want to merge 2 libraries - react slicks and LightGallery. Look at this code

  return (
    <LightGallery speed={500} plugins={[lgThumbnail, lgZoom]}>
      <Slider {...SlickSettings}>
        {media.map((media) => {
          return (
            <a href={`http://localhost/media${media.name}`}>
              <img
                src={`http://localhost/media${media.name}`}
                alt={media.name}
                className="maxWidthImg"
                loading="lazy"
              />
            </a>
          );
        })}
      </Slider>
    </LightGallery>
  );

Problem is that LightGallery can't load the images. If I add LightGallery inside Slider, Slider doesn't work. If I add LightGallery inside map it works, but only at particular img, not gallery.

How can I merge this 2 libraries? Or maybe you know any alternatives?