on the first rendering the first active thumbnail is not active

[Banjer71]

I don't know why on the first rendering of the slider, the first thumbnail is not active, it works only if I click on it or if I resize the browser window without even clicking on the thumbnail or the next or prev button.
I had a look at all the examples, and it seems everything is correct.

I am using nextjs

any idea please

this is the code

 <Swiper
            loop={true}
            spaceBetween={10}
            keyboard={{
              enabled: true,
            }}
            pagination={{
              type: 'fraction',
              el: paginationEl,
            }}
            navigation={{prevEl, nextEl}}
            thumbs={{swiper: thumbsSwiper}}
            modules={[FreeMode, Navigation, Thumbs, Pagination, Keyboard]}
            className='mySwiper'>
            {cards &&
              cards.map((item, i) => (
                <SwiperSlide key={i}>
                  <div className='w-full'>
                    <div className='sm:h-[390px] md:w-[680px] md:h-[316px] lg:w-[719px] h-[348px] xl:w-[980px] h-[304px] md:mx-auto'>
                      <SlideCard
                        items={item}
                        showLevels={false}
                        showSubjects={false}
                      />
                    </div>
                  </div>
                </SwiperSlide>
              ))}
          </Swiper>
        </div>
        <div className={`rounded-b-xl md:py-4 ${getPictureBackGround(type)}`}>
          <Swiper
            onSwiper={setThumbsSwiper}
            spaceBetween={10}
            slidesPerView={4}
            freeMode={true}
            watchSlidesProgress={true}
            modules={[FreeMode, Navigation, Thumbs]}
            className='productImagesSliderThumbs'>
            {pic &&
              pic.map((image, i) => (
                <SwiperSlide key={i}>
                  <Thumbnail
                    src_link={image.thumb}
                    srcFallBack={getFallbackImage(type)}
                    src_ObjFict='contain'
                    fallbackObjFit='contain'
                  />
                </SwiperSlide>
              ))}
          </Swiper>

          <div className={styles.nav_container}>
            <div ref={paginationRef} className={styles.customPagination}></div>
            <button ref={prevElRef} className={styles.prev}>
              <Image src={arrowNext} />
            </button>
            <button ref={nextElRef} className={styles.next}>
              <Image src={arrowPrev} />
            </button>
          </div>

.custom-pagination {
  background-color: red;
  width: 50px;
  height: 50px;
}

.productImagesSliderThumbs {
  width: 30%;
  height: auto;
  box-sizing: border-box;
  cursor: pointer;
}

.productImagesSliderThumbs .swiper-wrapper {
  justify-content: center;
  margin-right: -5px;
}

.productImagesSliderThumbs .swiper-slide-thumb-active {
  opacity: 1;
  border: 2px solid red;
}

@media screen and (max-width: 767px) {
  .productImagesSliderThumbs {
    visibility: hidden;
  }
}