Как остановить autoplay у других слайдах Swiper ReactJS?

Question

[Alexander]

Здравствуйте, подскажите пожалуйста как остановить autoplay у других слайдах Swiper.
Есть слайдер со слайдами, внутри каждого слайда есть еще слайдер со своими слайдами и у него есть autoplay, который срабатывает у всех слайдах сразу, как можно настроить Swiper для отображения autoplay только у активных слайдов? Буду благодарен за помощь

<Swiper
      virtual
      wrapperTag='ul'
      className='heroSlider'
      allowTouchMove={false}
      speed={600}
      navigation={{
        prevEl: prevRef.current,
        nextEl: nextRef.current,
      }}
      onBeforeInit={(swiper: any) => {
        swiper.params.navigation.prevEl = prevRef.current
        swiper.params.navigation.nextEl = nextRef.current
      }}
      onSlideChangeTransitionStart={() => {
        let slides = Array.from(document.querySelectorAll('.heroSlide'))
        const activeSlide = slides.find((item: Element) => item.classList.contains('swiper-slide-active'))
        if (activeSlide) {
          const slideArr = activeSlide.getAttribute('data-href')
          if (slideArr) {
            setProductLink(slideArr)
          }
        }
      }}
    >
      {slides.map((slide, inx) => (
        <SwiperSlide key={`slide-${inx}`} className='heroSlide' tag='li' data-href={slide.path} virtualIndex={inx}>
          <IntroImage>
            <Swiper
              wrapperTag='ul'
              className='sliderImages'
              effect='cube'
              cubeEffect={{
                slideShadows: true,
                shadow: false,
              }}
              autoplay={{
                delay: 3000,
                disableOnInteraction: true,
                waitForTransition: true,
              }}
              speed={600}
              allowTouchMove
              loop
              loopedSlides={2}
              navigation={{
                nextEl: rotateRef.current,
              }}
              onBeforeInit={(swiper: any) => {
                swiper.params.navigation.nextEl = rotateRef.current
              }}
              breakpoints={{
                992: {
                  allowTouchMove: false,
                  autoplay: false,
                },
              }}
            >
              {slide.images.map((img, inx) => (
                <SwiperSlide key={`slide-image-${inx}`} className='slideImage' tag='li'>
                  <img src={img} alt={`Slide ${inx}`} />
                </SwiperSlide>
              ))}

              <RotateBtn ref={rotateRef}>
                <BiRotateLeft />
                <span>Rotate</span>
              </RotateBtn>
            </Swiper>
          </IntroImage>

          <IntroTitle>
            <Subtitle>Nike</Subtitle>
            <Title>{slide.title}</Title>
            <Subtitle>${slide.price}</Subtitle>
          </IntroTitle>
        </SwiperSlide>
      ))}

      <SwiperControl>
        <ArrowBtn ref={prevRef}>
          <IoIosArrowBack />
        </ArrowBtn>
        <IntroBtn black to={productLink}>
          Buy Now
        </IntroBtn>
        <ArrowBtn ref={nextRef}>
          <IoIosArrowForward />
        </ArrowBtn>
      </SwiperControl>
    </Swiper>