Почему response-image-magnify не работает внутри swiper js в React?

Question

Я новичок в реакции, поэтому я пытаюсь увеличить изображение в реакции. Я использую swiper js для отображения изображений продуктов, но для увеличения я использую react-image-magnify, но это не работает. Функция response-image-magnify работает вне swiper js, но не внутри. Есть ли решение для этого?

<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