Why does react-image-magnify not work inside swiper js in react?

Question

I'm new to react so I'm trying to zoom an image in react. I use swiper js to show product images but for zooming i use react-image-magnify but it is not working. The react-image-magnify is working outside swiper js but not inside. Is there any solution for this?

<Swiper
            navigation
            loop={true}
            thumbs={{ swiper: props.thumbsSwiper }}
         >
            {
               productData.gallery.map((item, idx) =>
                  <SwiperSlide key={`image-slides-${idx}`}>
                     <div className="slide-item" key={`image-slides-${idx}`}>
                        <div className="slide-item__thumb">
                            <ReactImageMagnify {...{
                                smallImage: {
                                    alt: 'Product Thumbnail',
                                    isFluidWidth: true,
                                    src: item.url,
                                    className: "img-fluid",
                                },
                                largeImage: {
                                    src: item.url,
                                    width: 1200,
                                    height: 1800,
                                },
                                enlargedImageContainerDimensions: {
                                    width: '200%',
                                    height: '100%'
                                }
                            }} />
                           {/*<img className="img-fluid" src={item.url} alt="Product Thumbnail" />*/}
                        </div>
                     </div>
                  </SwiperSlide>)

            }
         </Swiper>

Answer 1

import React, { useState } from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import { EffectFade, Autoplay, Thumbs } from "swiper/modules";
import ReactImageMagnify from "react-image-magnify";

import "swiper/css";
import "swiper/css/thumbs";

import Nature1 from "../assets/images/nature-1.jpg";
import Nature2 from "../assets/images/nature-2.jpg";
import Nature3 from "../assets/images/nature-3.jpg";
import Nature4 from "../assets/images/nature-4.jpg";
import Nature5 from "../assets/images/nature-5.jpg";
import Nature6 from "../assets/images/nature-6.jpg";
import Nature7 from "../assets/images/nature-7.jpg";
import Nature8 from "../assets/images/nature-8.jpg";
import Nature9 from "../assets/images/nature-9.jpg";

export default function Swip() {
  const [thumbsSwiper, setThumbsSwiper] = useState(null);
  const [swiperRef, setSwiperRef] = useState(null);
  const slideTo = (index) => {
    swiperRef.slideTo(index - 1, 0);
  };
  const handleAutoplay = (swiper) => {
    swiper.autoplay.start();
  };

  return (
    <>
      <div className="cont">
        <Swiper
          onSwiper={setThumbsSwiper}
          loop={true}
          direction={"vertical"}
          watchSlidesProgress={true}
          spaceBetween={10}
          slidesPerView={4}
          modules={[Thumbs]}
          className="mySwiper"
        >
          <SwiperSlide>
            <img className="" src={Nature1} alt="page1" />
          </SwiperSlide>
          <SwiperSlide>
            <img className="" src={Nature2} alt="page2" />
          </SwiperSlide>
          <SwiperSlide>
            <img className="" src={Nature3} alt="page3" />
          </SwiperSlide>
          <SwiperSlide>
            <img className="" src={Nature4} alt="page4" />
          </SwiperSlide>
          <SwiperSlide>
            <img className="" src={Nature5} alt="page5" />
          </SwiperSlide>
          <SwiperSlide>
            <img className="" src={Nature6} alt="page6" />
          </SwiperSlide>
          <SwiperSlide>
            <img className="" src={Nature7} alt="page7" />
          </SwiperSlide>
          <SwiperSlide>
            <img className="" src={Nature8} alt="page8" />
          </SwiperSlide>
          <SwiperSlide>
            <img className="" src={Nature9} alt="page9" />
          </SwiperSlide>
        </Swiper>

        <Swiper
          onSwiper={setSwiperRef}
          loop={true}
          spaceBetween={10}
          thumbs={{ swiper: thumbsSwiper }}
          modules={[Thumbs, Autoplay, EffectFade]}
          className="mySwiper2"
          autoplay={{
            delay: 1500,
            pauseOnMouseEnter: true,
          }}
          // fadeEffect={{
          //   crossFade: true,
          // }}
          // effect="fade"
          onAutoplayStop={handleAutoplay}
        >
          <SwiperSlide>
            <div className="zoom">
              <ReactImageMagnify
                {...{
                  smallImage: {
                    alt: "",
                    isFluidWidth: true,
                    src: Nature1,
                  },
                  largeImage: {
                    src: Nature1,
                    width: 1200,
                    height: 1800,
                  },
                  shouldUsePositiveSpaceLens: true,
                  isHintEnabled: true,
                  shouldHideHintAfterFirstActivation: false,
                }}
              />
            </div>
          </SwiperSlide>
          <SwiperSlide>
            <div className="zoom">
              <ReactImageMagnify
                style={{ opacity: ".2" }}
                {...{
                  smallImage: {
                    alt: "",
                    isFluidWidth: true,
                    src: Nature2,
                  },
                  largeImage: {
                    src: Nature2,
                    width: 1200,
                    height: 1800,
                  },
                }}
              />
            </div>
          </SwiperSlide>
          <SwiperSlide>
            <div className="zoom">
              <ReactImageMagnify
                {...{
                  smallImage: {
                    alt: "",
                    isFluidWidth: true,
                    src: Nature3,
                  },
                  largeImage: {
                    src: Nature3,
                    width: 1200,
                    height: 1800,
                  },
                }}
              />
            </div>
          </SwiperSlide>
          <SwiperSlide>
            <div className="zoom">
              <ReactImageMagnify
                {...{
                  smallImage: {
                    alt: "",
                    isFluidWidth: true,
                    src: Nature4,
                  },
                  largeImage: {
                    src: Nature4,
                    width: 1200,
                    height: 1800,
                  },
                }}
              />
            </div>
          </SwiperSlide>
          <SwiperSlide>
            <div className="zoom">
              <ReactImageMagnify
                {...{
                  smallImage: {
                    alt: "",
                    isFluidWidth: true,
                    src: Nature5,
                  },
                  largeImage: {
                    src: Nature5,
                    width: 1200,
                    height: 1800,
                  },
                }}
              />
            </div>
          </SwiperSlide>
          <SwiperSlide>
            <div className="zoom">
              <ReactImageMagnify
                {...{
                  smallImage: {
                    alt: "",
                    isFluidWidth: true,
                    src: Nature6,
                  },
                  largeImage: {
                    src: Nature6,
                    width: 1200,
                    height: 1800,
                  },
                }}
              />
            </div>
          </SwiperSlide>
          <SwiperSlide>
            <div className="zoom">
              <ReactImageMagnify
                {...{
                  smallImage: {
                    alt: "",
                    isFluidWidth: true,
                    src: Nature7,
                  },
                  largeImage: {
                    src: Nature7,
                    width: 1200,
                    height: 1800,
                  },
                }}
              />
            </div>
          </SwiperSlide>
          <SwiperSlide>
            <div className="zoom">
              <ReactImageMagnify
                {...{
                  smallImage: {
                    alt: "",
                    isFluidWidth: true,
                    src: Nature8,
                  },
                  largeImage: {
                    src: Nature8,
                    width: 1200,
                    height: 1800,
                  },
                }}
              />
            </div>
          </SwiperSlide>
          <SwiperSlide>
            <div className="zoom">
              <ReactImageMagnify
                {...{
                  smallImage: {
                    alt: "",
                    isFluidWidth: true,
                    src: Nature9,
                  },
                  largeImage: {
                    src: Nature9,
                    width: 1200,
                    height: 1800,
                  },
                }}
              />
            </div>
          </SwiperSlide>
        </Swiper>
      </div>
      <p className="buttons">
        <button onClick={() => slideTo(8)} className="slide">
          Slide 8
        </button>
        <button onClick={() => slideTo(3)} className="slide">
          Slide 3
        </button>
      </p>
    </>
  );
}

#root {
    height: 100%;
}
html,
body {
    position: relative;
    height: 100%;
}

body {
    background: #eee;
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: 14px;
    color: #000;
    margin: 0;
    padding: 0;
}

.swiper {
    width: 100%;
    height: 300px;
    margin-left: auto;
    margin-right: auto;
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #eee;
    background-size: cover;
    background-position: center;
    /* Center slide text vertically */
    display: flex;
    justify-content: center;
    align-items: center;
    img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

.mySwiper2 {
    height: 100%;
    width: 100%;
}

.mySwiper {
    height: 100%;
    width: 30%;
    box-sizing: border-box;
    padding: 10px 0;
    .swiper-slide {
        width: 100%;
        height: 100%;
        opacity: 0.3;
    }
    .swiper-slide-thumb-active {
        opacity: 1;
    }
}
.swiper-pagination {
    bottom: 0 !important;
}
// cont
.cont {
    max-width: 120rem;
    margin: 0 auto;
    height: 80%;
    display: flex;
    gap: 0 1rem;
}
.zoom {
    width: 50%;
}
.buttons {
    text-align: center;
}
.slide {
    margin: 2rem;
}