Swiper ReactJS | initialSlide issue

Question

when I use initialSlide, the index I pass to it is completely broken. Imagine that I give it index 3, it will show me the first slide, if I give it index 4 it will give me the 5th. Did you encounter the same bug?

<Swiper
      effect={'coverflow'}
      grabCursor={false}
      centeredSlides={true}
      loop={true}
      slidesPerView={3}
      coverflowEffect={{
        rotate:0,
        stretch: 300,
        depth:300,
        modifier: 1,
      }}

      modules={[
        EffectCoverflow, Navigation, Pagination
      ]}

      navigation={{nextEl: '#left-arrow',
      prevEl: '#right-arrow', clickable: true}}

      className='swiper_container'
      
      >
        <SwiperSlide>
          <div className="card card-1">
            <p>card 1</p>
          </div>
        </SwiperSlide>
        <SwiperSlide>
          <div className="card card-2">
            <p>card 2</p>
          </div>
        </SwiperSlide>
        <SwiperSlide>
          <div className="card card-3" slot='wrapper-start'>
            <p>card 3</p>
          </div>
        </SwiperSlide>
        <SwiperSlide>
          <div className="card card-4">
            <p>card 4</p>
          </div>
        </SwiperSlide>
        <SwiperSlide>
          <div className="card card-5">
            <p>card 5</p>
          </div>
        </SwiperSlide>
      </Swiper>

Here is my CSS. I don't know if the problem comes from here. I read other posts that said that SwiperJS had a lot of bugs

.caroussels-container {
    position: relative;
    align-items: center;
    justify-content: center;
    top: 90px;
    max-width: 90%;
    height: 375px;
    float: right;
    margin-right: 50px;
    width: 80%;
}

.card {
    position: relative;
    text-align: center;
    right: 25%;
    height: 375px;
    width: 150%;
    background-color: lightblue;
}

.swiper_container {
    display: block;
    position: relative;
}

.swiper-controler-left {
    position: absolute;
    width: fit-content;
    display: flex;
    left: 0;
    top: 40%;
}

.swiper-controler-right{
    position: absolute;
    width: fit-content;
    display: flex;
    top: 40%;
    right: 0;
    z-index: 2;
}

.swiper-wrapper {
    position: relative;
    max-width: 0px;
}

Here is what I would like to get :

Here is what I get :