Swiper js “autoheight ” not resizing for first slide height when page mount

Guys I’m facing a problem in my reactapp and i don’t know how to fix it. I searched a lot in stackoverflow but didn’t find anything useful.

I have a fullWidth Image slider and i set the swiper autoHeight property to true. because images don’t have the same height. The problem is when the component mount swiper height is 0. i can only see the pagination buttons.

when i slide to next then autoHeight works fine. on first render it dosen’t work.

Is there anyway to fix that?

    <Swiper
      onSwiper={handleSetSwiper}
      autoHeight
      breakpoints={{
          0: {
            slidesPerView: 1,
            slidesPerGroup: 1,
          },
          600: {
            slidesPerView: 1,
            slidesPerGroup: 1,
          },
          978: {
            slidesPerView: cardsInARow,
            slidesPerGroup: cardsInARow,
            spaceBetween: 15,
          },
        }
      }
      pagination={{
        clickable: true,
      }}
      style={{
        paddingBottom: cardsInARow === 1 ? '2.5rem' : '4.5rem',
        margin: 0,
      }}
    >
      {slides.map((slide) => (
        <SwiperSlide key={slide.id}>
          <ImageCard content={slide.data} />
        </SwiperSlide>
      ))}
    </Swiper>

P.S: setting observer and observerParents property to true didn’t solve my issue