There is a gap on the left of the first slide and the last slide

Question

Here is what I did:

<style>
  html,
  body {
    position: relative;
    height: 100%;
    margin: 0;
    padding: 0;
  }

  body {
    background: #ac2525;
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: 14px;
    color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  swiper-container {
    width: 80%;
    height: 300px;
    overflow: hidden;
    border: 1px solid #000;
  }

  swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease
  }

  
  swiper-slide:not(.swiper-slide-active) {
    transform: scale(0.9);
  }

  
  swiper-container.first-slide-active .swiper-slide:first-child,
  swiper-container.last-slide-active .swiper-slide:last-child {
    margin-left: -20px;
  }
</style>

<swiper-container
  class="mySwiper"
  slides-per-view="2"
  space-between="20"
  centered-slides="true"
>
  <swiper-slide>Slide 1</swiper-slide>
  <swiper-slide>Slide 2</swiper-slide>
  <swiper-slide>Slide 3</swiper-slide>
  <swiper-slide>Slide 4</swiper-slide>
  <swiper-slide>Slide 5</swiper-slide>
  <swiper-slide>Slide 6</swiper-slide>
</swiper-container>

<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-element-bundle.min.js"></script>
<script>
  const swiper = document.querySelector(".mySwiper");

  swiper.addEventListener("slidechangetransitionend", () => {
    const activeIndex = swiper.swiper.activeIndex;
    const slides = swiper.swiper.slides;

    if (activeIndex === 0) {
      swiper.classList.add("first-slide-active");
      swiper.classList.remove("last-slide-active");
    } else if (activeIndex === slides.length - 1) {
      swiper.classList.add("last-slide-active");
      swiper.classList.remove("first-slide-active");
    } else {
      swiper.classList.remove("first-slide-active", "last-slide-active");
    }

    swiper.swiper.update();
  });
</script>

What I'm trying to achieve here:

When on the first slide (slide 1) is fully visible, and the slide next to it (slide 2) is half visible, with no gap to the left of the first slide (only 2 slides to be shown here).

When on the middle slides (2-5), ex. on slide 2, the slide 2 is fully visible, and the prev slide (slide 1) and the next slide (slide 3) are half visible (3 slides to be shown here). This is already working as expected

When on the last slide (slide 6) is fully visible, and the previous slide (slide 5) is half visible, with no gap to the right of the last slide (only 2 slides to be shown here).

*** I have also tried react-slick with no luck.

Any idea what I did wrong or missed?

expected result on first and last slide: