Неработает непеключение слайда в библиотеке Swiper.Js при сборке проекта на React

Делаю проект решил использовать Swiper.JS с эффектом thumbs. решил собрать проект, что бы посмотреть как будет выглядеть на выходе, но столкнулся с проблемой, что переключение мини слайдера не происходит клик на слайды не реагуруют , даже класс ".swiper-slide-thumb-active" активации не добавляется. Почему так происходит , и как это исправить? Буду очень благодарен за ответ!

import React, { useRef, useState } from "react";
import { Autoplay, EffectFade, FreeMode, Thumbs } from "swiper/modules";
import { Swiper, SwiperClass, SwiperRef, SwiperSlide } from "swiper/react";

import "swiper/css";
import "swiper/css/effect-fade";
import "swiper/css/free-mode";
import "swiper/css/navigation";
import "swiper/css/thumbs";

interface IHeroProps { }

export const Hero: React.FC<IHeroProps> = () => {
    // const autoplaySwiperDelay: number = 5000;
    const autoplaySwiperDelay: number = 25_00_000;
    const [thumbsSwiper, setThumbsSwiper] = useState<SwiperClass | null>(null);
    const mediaInfo = {
        name: "Поднятие уровня в одиночку",
        release: "2024",
        rating: 9.1,
        duration: 81,
        description: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis iste modi ipsam sed sunt qui distinctio. Dicta facere praesentium, ab quaerat maiores, nam vitae ipsa vel velit molestiae accusantium dolorem!",
    };
    const { minute, hour } = convertMinuteToMinuteAndHour(mediaInfo.duration);
    const swiperNewRef = useRef<SwiperRef | null>(null);

    const onSlideChange = () => {
        if (!swiperNewRef.current) return;
        const swiperInstance = swiperNewRef.current.swiper as SwiperClass;
        if (swiperInstance) {
            const isEnd = swiperInstance.isEnd;
            if (isEnd) {
                swiperInstance.autoplay.stop();
            } else {
                swiperInstance.autoplay.start();
            }
        }
    };

    return (
        <div
            className="home__hero"
        >
            <Swiper
                thumbs={thumbsSwiper ? { swiper: thumbsSwiper } : undefined}
                controller={thumbsSwiper ? { control: thumbsSwiper } : undefined}
                spaceBetween={30}
                effect={"fade"}
                modules={[FreeMode, Thumbs, Autoplay, EffectFade]}
                autoplay={{
                    delay: autoplaySwiperDelay,
                    disableOnInteraction: false,
                }}
                allowTouchMove={false}
                className={classNames("home__hero-main_swiper")}
            >
                {postersImg.map((i, idx) => (
                    <SwiperSlide
                        key={idx}
                        className={classNames("home__hero-main_swiper-slide")}
                    >
                        <img
                            src={i}
                            alt="swiper-poster-img"
                        />
                    </SwiperSlide>
                ))}
            </Swiper>
            <div className="home__hero-wrapper">

                <div className="home__hero-wrapper_top">
                    <div className="home__hero-content">
                        <h1 className="home__hero-name">{mediaInfo.name}</h1>
                        <div className="home__hero-details">
                            <div className="home__hero-release">{mediaInfo.release}</div>
                            <span></span>
                            <div className="home__hero-duration">
                                <span>{hour}h</span>
                                <span>{minute}m</span>
                            </div>
                            <span></span>
                            <div className="home__hero-rating">
                                <CircleRating size={45} value={mediaInfo.rating * 10} isRound={true} />
                                <span className="home__hero-rating_number">{mediaInfo.rating}</span>
                            </div>
                        </div>
                        <p className="home__hero-description">{mediaInfo.description}</p>
                    </div>
                    <div className="home__hero-release_date_container">
                        <div className="home__hero-release_date">
                            on 30th <br /> october
                        </div>

                        <div className="home__hero-btns">
                            <button className="home__hero-watch_trailer home__hero-watch_btn">
                                <div className="home__hero-watch_play_icon">
                                    <PlayIcon />
                                </div>
                                <span
                                    className="home__hero-watch_text"
                                >Watch trailer</span>
                            </button>
                            <button className="home__hero-watch_online home__hero-watch_btn">
                                <div className="home__hero-watch_play_icon">
                                    <PlayIcon />
                                </div>
                                <span
                                    className="home__hero-watch_text"
                                >Watch online</span>
                            </button>
                        </div>

                    </div>
                </div>

                <div className="home__hero-wrapper_bottom">
                    <div className="home__hero-inner">
                        <Swiper
                            ref={swiperNewRef}
                            spaceBetween={10}
                            freeMode={true}
                            slidesPerView={2}
                            breakpoints={{
                                840: {
                                    slidesPerView: 5,
                                },
                                540: {
                                    slidesPerView: 4,
                                },
                                480: {
                                    slidesPerView: 3,
                                }
                            }}

                            watchSlidesProgress={true}
                            modules={[FreeMode, Thumbs, Autoplay]}
                            controller={thumbsSwiper ? { control: thumbsSwiper } : undefined}
                            autoplay={{
                                delay: autoplaySwiperDelay,
                                disableOnInteraction: false,
                            }}
                            onSwiper={setThumbsSwiper}
                            onSlideChange={onSlideChange}
                            className={classNames("home__hero-overlay_swiper")}
                        >
                            {newImg.map((i, idx) => (
                                <SwiperSlide
                                    key={idx}
                                    className={classNames("home__hero-overlay_swiper-slide")}
                                >
                                    <img
                                        src={i}
                                        alt="swiper-poster-img"
                                    />
                                </SwiperSlide>
                            ))}
                        </Swiper>
                    </div>
                </div>

            </div>
        </div>
    );
};