React Swiper Thumbs Gallery Loop is not working

Question

I am using SwiperJs in React and want to do a function called Swiper Thumbs Gallery Loop. But when I add the loop={true} attribute, when I click on next or prev it doesn't move forward the slide only when I drag the slide will the next and prev buttons take effect. Here is my code

// Import Swiper styles
import "swiper/css";
import "swiper/css/free-mode";
import "swiper/css/navigation";
import "swiper/css/thumbs";

import "./styles.scss";

// import required modules
import { FreeMode, Navigation, Thumbs } from "swiper/modules";
import { useState } from "react";
import { Swiper, SwiperSlide } from "swiper/react";

export default function SlideDetail({ dataImage }) {
    const [thumbsSwiper, setThumbsSwiper] = useState(null);

    return (
        <>
            <Swiper
                style={{
                    "--swiper-navigation-color": "#fff",
                    "--swiper-pagination-color": "#fff",
                }}
                spaceBetween={10}
                navigation={true}
                thumbs={{
                    swiper:
                        thumbsSwiper && !thumbsSwiper.destroyed
                            ? thumbsSwiper
                            : null,
                }}
                modules={[FreeMode, Navigation, Thumbs]}
                className="mySwiper2"
            >
                {dataImage &&
                    dataImage.length > 0 &&
                    dataImage.map((img, index) => {
                        return (
                            <SwiperSlide key={index}>
                                <img src={img} alt="" />
                            </SwiperSlide>
                        );
                    })}
            </Swiper>
            <Swiper
                onSwiper={setThumbsSwiper}
                spaceBetween={10}
                slidesPerView={4}
                freeMode={true}
                watchSlidesProgress={true}
                modules={[FreeMode, Navigation, Thumbs]}
                className="mySwiper mt-[10px]"
            >
                {dataImage &&
                    dataImage.length > 0 &&
                    dataImage.map((img, index) => {
                        return (
                            <SwiperSlide key={index}>
                                <img src={img} />
                            </SwiperSlide>
                        );
                    })}
            </Swiper>
        </>
    );
}

How can I solve this problem ?