Некорректно работает swiper в grid контейнере

const swiper = new Swiper('.swiper', {
  // Optional parameters
  loop: true,
});

.container {
  display: grid;
  grid-template-columns: 1fr 39%;
}
.item1 {
  padding: 50px 10px;
  background-color: pink;
}
.item2 {
  padding: 50px 10px;
  background-color: green;
  z-index: 1;
}

<link href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
<div class="container">
  <div class="item1 swiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
         <div>text1text1text1text1</div>
      </div>
      <div class="swiper-slide">
         <div>text2text2text2text2</div>
      </div>
    </div>
  </div>
  <div class="item2">
   item2
  </div>
</div>