SwiperJs Thumbs gallery not working with react-redux data.map

Question

Swiperjs working fine with singel slider. But when i add thumbs swiper to the same page, both of them not working. The Data fetch successfully and show in the state. When i add thumbs slider secondly without refrsh page, both showing without error. when i refresh, page crashed.

TopTenList.jsx

import { useState } from "react";
import PropTypes from "prop-types";
import { Swiper, SwiperSlide } from "swiper/react";
import { FreeMode, Navigation, Thumbs } from "swiper";
import "swiper/css";
import "swiper/css/free-mode";
import "swiper/css/navigation";
import "swiper/css/thumbs";

import Loader from "./shared/Loader";

function TopTenList({ loading, error, movies, topic }) {
  const [activeThumb, setActiveThumb] = useState();

  const [thumbShows, setThumbShows] = useState([]);

  return (
    <div>
      {loading ? (
        <Loader />
      ) : error ? (
        <h1>{error}</h1>
      ) : (
        <>
          <div className="top_show_hero">
            <Swiper
              loop={true}
              spaceBetween={10}
              navigation={false}
              grabCursor={true}
              thumbs={{ swiper: activeThumb }}
              modules={[FreeMode, Navigation, Thumbs]}
              className="top_hero_slider"
            >
              {movies.map((movie, ind) => (
                <SwiperSlide key={movie.id} virtualIndex={ind}>
                  {movie.original_title}
                </SwiperSlide>
              ))}
            </Swiper>
          </div>
          <div className="top_show_thumb">
            <Swiper
              onSwiper={setActiveThumb}
              loop={true}
              spaceBetween={10}
              slidesPerView={5.5}
              freeMode={true}
              modules={[FreeMode, Navigation, Thumbs]}
              className="trend_movie_thumb_slider"
            >
              {movies.map((movie, ind) => (
                <SwiperSlide key={movie.id} virtualIndex={ind}>
                  {movie.original_title}
                </SwiperSlide>
              ))}
            </Swiper>
          </div>
        </>
      )}
    </div>
  );
}

// TopTenList.propTypes = {
//   movies: PropTypes.array.isRequired,
// };

export default TopTenList;

Home.jsx

import { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";

import BannerSlider from "../components/BannerSlider";
import ScrollList from "../components/ScrollList";
import TopTenList from "../components/TopTenList";

import { playNow } from "../redux/features/movieSlice";
import { topShowTv } from "../redux/features/movieSlice";
import { showTrending } from "../redux/features/movieSlice";

function Home() {
  const dispatch = useDispatch();

  const movies = useSelector((state) => state.movies);
  const {
    playingNow: {
      loading: latestLoading,
      latestMovies,
      error: latestError,
      loadingTopShow,
      errorTopShow,
      topTvShows,
      loadingTrending,
      errorTrending,
      trendingShows,
    },
  } = movies;

  useEffect(() => {
    dispatch(playNow());
    dispatch(topShowTv());
    dispatch(showTrending());
  }, [dispatch]);

  return (
    <div className=" text-white">
      <BannerSlider
        movies={latestMovies}
        loading={latestLoading}
        error={latestError}
      />
      <ScrollList
        movies={latestMovies}
        loading={latestLoading}
        error={latestError}
        topic="Latest Movies"
      />
      <ScrollList
        movies={topTvShows}
        loading={loadingTopShow}
        error={errorTopShow}
        topic="Top Series"
      />
      <ScrollList
        movies={trendingShows}
        loading={loadingTrending}
        error={errorTrending}
        topic="Trending Shows"
      />
      <TopTenList
        movies={trendingShows}
        loading={loadingTrending}
        error={errorTrending}
        topic="Trending Shows"
      />
    </div>
  );
}

export default Home;

error

Uncaught TypeError: Cannot read properties of undefined (reading 'classList')

How to add Swiperjs Thumbs gallery from api data that come from redux-state.