Using react-responsive-carousel with react-image-magnifiers

I am facing issues using react-responsive-carousel with react-image-magnifiers

I am trying to use carousel over react-image-magnifier library.

I do not get the magnifier effect when using with carousel but when I use react-image-magnifier alone I get the effect.

please find codesandbox link

import { Carousel } from "react-responsive-carousel";
import { SideBySideMagnifier } from "react-image-magnifiers";
import "react-responsive-carousel/lib/styles/carousel.min.css";

export default function ProductSlider() {
  const renderCustomThumbs = () => {
    return [
      <picture>
        <source
          data-srcSet="https://i.ibb.co/z5CC6P9/AB-10000008011.jpg"
          type="image/jpg"
        />
        <img
          key="01"
          src="https://i.ibb.co/z5CC6P9/AB-10000008011.jpg"
          alt="First Thumbnail"
          height="70"
        />
      </picture>,
      <picture>
        <source
          data-srcSet="https://i.ibb.co/z5CC6P9/AB-10000008011.jpg"
          type="image/jpg"
        />
        <img
          key="02"
          src="https://i.ibb.co/z5CC6P9/AB-10000008011.jpg"
          alt="Second Thumbnail"
          height="70"
        />
      </picture>
    ];
  };

  return (
    <>
      <h2>With Carousel magnifiers dosen't works </h2>
      <div style=>
        <Carousel
          showArrows={false}
          showStatus={true}
          showIndicators={false}
          showThumbs={true}
          autoPlay={false}
          transitionTime={500}
          swipeable={false}
          emulateTouch={true}
          renderThumbs={renderCustomThumbs}
        >
          <div>
            <SideBySideMagnifier
              imageSrc="https://i.ibb.co/z5CC6P9/AB-10000008011.jpg"
              imageAlt="First Slide"
              alwaysInPlace={false}
              fillAvailableSpace={true}
              fillAlignTop={true}
              fillGapRight={10}
              fillGapBottom={10}
              fillGapTop={10}
              fillGapLeft={0}
            />
          </div>
          <div>
            <SideBySideMagnifier
              imageSrc="https://i.ibb.co/z5CC6P9/AB-10000008011.jpg"
              imageAlt="Second Slide"
              alwaysInPlace={false}
              fillAvailableSpace={true}
              fillAlignTop={true}
              fillGapRight={10}
              fillGapBottom={10}
              fillGapTop={10}
              fillGapLeft={0}
            />
          </div>
          )
        </Carousel>
      </div>
      <h2>Without Carousel magnifiers works </h2>
      <div style=>
        <SideBySideMagnifier
          imageSrc={"https://i.ibb.co/z5CC6P9/AB-10000008011.jpg"}
          alwaysInPlace={false}
          fillAvailableSpace={true}
          fillAlignTop={true}
          fillGapRight={10}
          fillGapBottom={10}
          fillGapTop={10}
          fillGapLeft={0}
        />
      </div>
    </>
  );
}

from Using react-responsive-carousel with react-image-magnifiers