How should I remove RESETTING when autoplaying ?

[wish-explorelogy]

I need to add custom duration when a specific slide is entered. But it's resetting after I changed the autoplayDuration with stateChange.

How Can I fix this? Help me. This is my code.

import React, { Fragment, useEffect, useRef, useState } from "react";
import HeroSlider, { Slide } from "hero-slider";

import { useMediaQuery } from "react-responsive";
import { breakpoints } from "../../common/responsive";

const HeroSliderComponent = () => {
  const isMobile = useMediaQuery({
    query: breakpoints.mobile,
  });
  const defaultDuration = 4000;
  const [duration, setDuration] = useState(defaultDuration);
  const [currentSlide, setCurrentSlide] = useState(1);

  const videoRef = useRef();

  useEffect(() => {
    if (typeof videoRef.current !== "undefined") {
      if (currentSlide == 4) {
        videoRef.current.play();
        setDuration(videoRef.current.duration * 1000);
      } else {
        videoRef.current.pause();
        setDuration(defaultDuration);
      }
    }
  }, [currentSlide, videoRef.current]);

return (
<>
 <HeroSlider
        initialSlide={1}
        onAfterChange={(currentSlide) => {
          setCurrentSlide(currentSlide);
        }}
        style={{
          backgroundColor: "rgba(0, 0, 0, 0.33)",
        }}
        settings={{
          slidingDuration: 250,
          slidingDelay: 100,
          shouldAutoplay: true,
          shouldDisplayButtons: true,
          autoplayDuration: duration,
          height: isMobile ? "500px" : "600px",
        }}
      >
...
</HeroSlider>
</>
)

}

[rmolinamir]

This should be fixed with the release of v.3.0.0.