Swiper Coverflow Alignment Issues in React

I am implementing a coverflow effect in my carousel using swiper library. But its not working the way i need.

Here’s what i get:

but I need like this

Code I tried:

import React, { useRef } from "react";
import { EffectCoverflow } from "swiper/modules";
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";

export default function App() {
  const swiperRef = useRef(null);

  const goNext = () => {
    if (swiperRef.current && swiperRef.current.swiper) {
      swiperRef.current.swiper.slideNext();
    }
  };

  const goPrev = () => {
    if (swiperRef.current && swiperRef.current.swiper) {
      swiperRef.current.swiper.slidePrev();
    }
  };

  const Box = ({ item }) => {
    return (
      <div style={{ width: "150px", height: "200px", background: "red" }}>
        Slide {item}
      </div>
    );
  };

  return (
    <div>
      <Swiper
        ref={swiperRef}
        modules={[EffectCoverflow]}
        spaceBetween={50}
        slidesPerView={5}
        centeredSlides={true}
        effect={"coverflow"}
        grabCursor={true}
        EffectCoverflow={{
          rotate: 50,
          stretch: 0,
          depth: 100,
          modifier: 1,
          slideShadows: true
        }}
      >
        {[1, 2, 3, 4, 5, 6, 7, 8].map((item, index) => (
          <SwiperSlide>
            <Box item={item} />
          </SwiperSlide>
        ))}
      </Swiper>
      <button onClick={goPrev}>Previous</button>
      <button onClick={goNext}>Next</button>
    </div>
  );
}

i can change slidesPerView={5}. It comes like this


I made auto to adapt to screen sizes