Loop true and vertical slider issue when using Swiperjs on Nextjs

Hello I have 2 main problems with Swiperjs

1.) I am getting the error when ı use loop:true

<Swiper
    onSwiper={(e) => setSwiperLength(e.slides.length)}
    onActiveIndexChange={(e) => setSwiperIndex(e.activeIndex)}
    navigation={{ prevEl: '.prev', nextEl: '.next' }}
    spaceBetween={50}
    slidesPerView={1}
    loop={true}
    breakpoints={{
      1490: {
        slidesPerView: 3,
        spaceBetween: 30,
      },
      1920: {
        slidesPerView: 4,
        spaceBetween: 30,
      },
    }}
  >

enter image description here 2.) Second proplem infinity height when using vertical slider

when i use vertical slide the swiper-slide length is miscalculated and goes on forever.

<Swiper
    direction={"vertical"}
    pagination={{
      clickable: true,
    }}
    className="mySwiper"
  >
    <SwiperSlide>Slide 1</SwiperSlide>
    <SwiperSlide>Slide 2</SwiperSlide>
    <SwiperSlide>Slide 3</SwiperSlide>
  </Swiper>

enter image description here

Technologies and versions I use enter image description here