Autoplay Progress not resetting to default value

[phaniophrero]

Hi, I've created a custom way of showing Autoplay Progress svgs, I've mapped one for each slide and I'm using them as pagination now the problem is that after the --progress animation ends the circle stays as a complete circle, and doesn't reset to the default value, and the next svg circle progress starts and gets stuck as full circle as well, what can I do to reset them everytime the animation is completed to get back to default ?

this is my slider's code :

import { useState, useRef, useEffect } from "react";
import { Swiper, SwiperSlide, useSwiper } from "swiper/react";
import { Autoplay, Pagination, Navigation } from "swiper/modules";
import CustomNavigation from "./CustomNavigation";

import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/navigation";

const slides = [
  {
    id: 1,
    slide: "Slide 1",
  },
  {
    id: 2,
    slide: "Slide 2",
  },
  {
    id: 3,
    slide: "Slide 3",
  },
  {
    id: 4,
    slide: "Slide 4",
  },
];

const SliderFull = () => {
  const [slideIndex, setSlideIndex] = useState(null);
  const [swiper, setSwiper] = useState(null);
  const progressCircle = useRef(null);
  const progressContent = useRef(null);
  const onAutoplayTimeLeft = (s, time, progress) => {
    progressCircle.current?.style.setProperty("--progress", 3 - progress);
    // progressContent.current.textContent = `${Math.ceil(time / 1000)}s`;
  };

  console.log("slide: ", slideIndex);

  const slideTo = (index) => {
    if (!swiper || swiper.destroyed) {
      return;
    }
    swiper.slideTo(index);

    console.log("index: ", index);
  };

  return (
    <div className="slider-full-container">
      <Swiper
        onSlideChange={(index) => {
          setSlideIndex(index.realIndex);
        }}
        onSwiper={setSwiper}
        slidesPerView={1}
        spaceBetween={30}
        centeredSlides={true}
        autoplay={{
          delay: 3000,
          disableOnInteraction: false,
          pauseOnMouseEnter: true,
        }}
        loop={true}
        // pagination={{
        //   clickable: true,
        // }}
        // navigation={true}
        modules={[Autoplay, Pagination, Navigation]}
        onAutoplayTimeLeft={onAutoplayTimeLeft}
        history={{
          key: "slide",
        }}
        className="mySwiper"
      >
        {slides.map((slide) => (
          <SwiperSlide key={slide.id}>{slide.slide}</SwiperSlide>
        ))}

        <div className="autoplay-progress-container">
          {slides.map((dotSlide, index) => (
            <div
              key={dotSlide.id}
              className="autoplay-progress"
              slot="container-end"
              onClick={() => slideTo(index)}
            >
              <svg
                viewBox="0 0 48 48"
                ref={index == slideIndex ? progressCircle : null}
              >
                <circle cx="24" cy="24" r="20"></circle>
                <circle
                  className="circle-center"
                  cx="50%"
                  cy="50%"
                  r="3"
                  fill="#0062ff"
                />
              </svg>
              <span ref={index == slideIndex ? progressContent : null}></span>
            </div>
          ))}
        </div>
        <CustomNavigation />
      </Swiper>
    </div>
  );
};

export default SliderFull;