Zoom effect is not working when carousel effect is applied

[hetalsodavadiya]

                      <div
                        id="slider02"
                        className="carousel carousel-product-detail slide"
                        data-ride="carousel"
                      >
                      <div className="carousel-inner">
                          {

                                SpreeProductImages.map((image, index) => {
                                  imageUrl =
                                    global.config.imageUrl +
                                    SpreeProductImages[0].main_image;
                                  let classname =
                                    index === activeImageIndex ? "active" : "";
                                  return (
                                    <div
                                      className={"carousel-item " + classname}
                                      key={index}
                                    >
                                      <ReactImageMagnify
                                        {...{
                                          smallImage: {
                                          alt="banner slider",
                                            isFluidWidth: true,
                                            src: global.config.imageUrl +
                                              image.main_image,
                                            sizes: '(max-width: 480px) 100vw, (max-width: 1200px) 30vw, 360px'
                                          },
                                          largeImage: {
                                            src: global.config.imageUrl +
                                              image.main_image,
                                            width: 1426,
                                            height: 2000
                                          },
                                          lensStyle: { backgroundColor: 'rgba(0,0,0,.6)' },
                                          enlargedImagePortalId: 'slider02',
                                          enlargedImageContainerDimensions: {
                                            width: '200%',
                                            height: '100%'
                                          },
                                          enlargedImagePosition: "beside"
                                        }}
                                      />
                                    </div>
                                  );
                                })
                             }
                        </div>
                   </div>

Hello @ethanselzer ,
In above code , zoom effect is working only for any one image from carousel. Every time zoom effect is applied for any one image and render zoom image in bottom not beside of div tag. So how can i implement zoom effect for all images while carousel effect is applied ?

[sejanH]

@hetalsodavadiya did you find any workarounds?