Не работают js скрипты на клонированных слайдах в swiper slider

Есть зацикленный swiper(v8), в каждом слайде нужно по клику выполнять определенное действие (просто для примера клик по белому квадратику активирует его, при повторном клике деактивирует). Все отлично работает при loop: false. Но при loop: true на клонированных слайдах скрипт не работает, вернее работает но с багом.

<div class="slider swiper">
  <div class="swiper-wrapper">
    <div class="item swiper-slide" style="background: red;">
      <div class="infavour js-inFavour"></div>
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQlIzx5KDiVmUPPgqHB3ucX_3b1hczWVS2RUrS0bg-AZKCVSCnEr5i-vofDr3EbzYZTKME&usqp=CAU" alt="">
    </div>
    <div class="item swiper-slide" style="background: yellow;">
      <div class="infavour js-inFavour"></div>
      <img src="https://p4.wallpaperbetter.com/wallpaper/1/398/339/elden-ring-landscape-game-art-video-game-art-video-games-hd-wallpaper-preview.jpg" alt="">
    </div>
    <div class="item swiper-slide" style="background: green;">
        <div class="infavour js-inFavour"></div>
      <img src="https://wallpapers.com/images/featured/bioshock-p4a8ftha75wzssi7.jpg" alt="">
    </div>
    <div class="item swiper-slide" style="background: blue;">
        <div class="infavour js-inFavour"></div>
      <img src="https://wallpapers.com/images/featured/dead-by-daylight-zi9ycgvp8lfzabv9.jpg" alt="">
    </div>
  </div>
  <button class="swiper-button-prev"></button>
  <button class="swiper-button-next"></button>
</div>

.item{
  position: relative;
  height: 300px;
}
.item img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.infavour{
    position: absolute;
    z-index: 2;
    top: 20px;
    right: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background: #FFFFFF;
    border-radius: 5px;
    cursor: pointer;
}
.infavour.active{
  background: black;
}

const swiper = new Swiper('.slider', {
        slidesPerView: 3,
    loop: true,
        navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
        }
    
    });


const hearts = document.querySelectorAll('.js-inFavour')
    hearts.forEach(item => {
        item.addEventListener('click', function(){
            item.classList.toggle('active')
        })
        
    })

код в песочнице - https://codepen.io/sergeykomyza/pen/RwYqPax?editors=1011

это вообще можно как то решить ?