Как зациклить Swiper в react с типом creative?

Question

[Clear-sky]

Нужно было отрисовать вот такую анимацию в блоке - https://dribbble.com/shots/14243284-Cargo-Logistic... мне прислали код но он был для js свайпера реализовал и подогнал его под react компонент все работает но проблема в том что работает это все только при клике или ручном свайпе - а нужно что бы он был зациклен и запускался автоматически

const SwiperHome = () => {
    return (
        <Swiper
            modules={[EffectCreative, Autoplay]}
            style={{
                userSelect: 'none'
            }}
            speed={3000}
            effect={"creative"}
            // rewind={true}
            autoplay={{
                delay: 3000,
            }}
            loop={true}
            loopFillGroupWithBlank={true}
            onInit={swiper => {swiper.slides[swiper.activeIndex].style.visibility = "visible"}}
            onSlideChange={swiper => {
                const cols = 3
                const duration =3000
                const slideEl = swiper.slides[swiper.activeIndex];
                const prevSlideEl = swiper.slides[swiper.previousIndex];
                const points = Array.from({ length: cols }, () => ({ t: 0 }));
                const updateClip = (el, points)=>{
                    const polygon = points.reduce((acc, val, i) => {
                        const x1 = (100 * i) / cols;
                        const x2 = (100 * (i + 1)) / cols;
                        const y = val.t;
                        acc.push(`${x1}% ${y}%`);
                        acc.push(`${x2}% ${y}%`);
                        return acc;
                    }, []);
                    polygon.push("100% 100%", "0% 100%");
                    el.style.clipPath = `polygon(${polygon.join(",")})`;
                }
                anime({
                    targets: points,
                    duration,
                    easing: "easeInOutQuad",
                    t: [100, 0],
                    delay: anime.stagger(200),
                    begin: () => {
                        slideEl.style.visibility = "visible";
                        prevSlideEl.style.visibility = "visible";
                    },
                    complete: () => {
                        prevSlideEl.style.visibility = "hidden";
                    },
                    update: () => updateClip(slideEl, points),
                });
            }
        }>
            <SwiperSlide className={style.slide}>
                <div className={style.slideBox}>
                    <img className={style.imgSlide} src={imone} alt=""/>
                </div>
            </SwiperSlide>
            <SwiperSlide className={style.slide}>
                <div className={style.slideBox}>
                    <img className={style.imgSlide} src={imtwo} alt=""/>
                </div>
            </SwiperSlide>
            <SwiperSlide className={style.slide}>
                <div className={style.slideBox}>
                    <img className={style.imgSlide} src={imthri} alt=""/>
                </div>
            </SwiperSlide>

        </Swiper>
    );
};

export default SwiperHome;