Infinite Loop creates duplicate instances on cloneNode(true)

Question

I am trying to create a carousel that has an infinite loop.. where the first item re-appears after the last item.. So basically I have 10 logos that are passing through an view.. so I am trying to move them one by one.. and as they move the one of the left gets deleted by node.removeChild(x) and I am trying to add with cloneNode(true) at the end of the list of items.

So I expected the list to always be 10 items as one gets removed and one gets added.. however there seems to be 2 of the same items getting added each time one gets deleted. I have tried to understand this by console.log process and it seems that when I delete too the console.log happens twice. I can't seem to figure out why. I've spent almost 2 days trying to figure this out on my own. I would appreciate some advice on understanding what I am doing wrong.

Please find below my HTML, CSS, and JS and here's a link to the codepen (https://codepen.io/alimbolar/pen/yLPzERj?editors=1111)

HTML

<main>
<section>
  <article class="carousel">
    <ul class="carousel__list">
      <li class="carousel__item"><figure><picture><img src="https://storage.googleapis.com/alimbolar-bucket/data/public/assets/images/logo/bvlgari-logo-400x200px.jpg" alt=""></picture></figure></li>
      <li class="carousel__item"><figure><picture><img src="https://storage.googleapis.com/alimbolar-bucket/data/public/assets/images/logo/champion-logo-400x200.jpg" alt=""></picture></figure></li>
      <li class="carousel__item"><figure><picture><img src="https://storage.googleapis.com/alimbolar-bucket/data/public/assets/images/logo/chopard-Logo-400x200px.jpg" alt=""></picture></figure></li>
      <li class="carousel__item"><figure><picture><img src="https://storage.googleapis.com/alimbolar-bucket/data/public/assets/images/logo/clem-margaux-logo-400x200px.jpg" alt=""></picture></figure></li>
      <li class="carousel__item"><figure><picture><img src="https://storage.googleapis.com/alimbolar-bucket/data/public/assets/images/logo/eagle-eyes-optics-400x200px.jpg" alt=""></picture></figure></li>
      <li class="carousel__item"><figure><picture><img src="https://storage.googleapis.com/alimbolar-bucket/data/public/assets/images/logo/exalt-cycle-logo-400x200px.jpg" alt=""></picture></figure></li>
      <li class="carousel__item"><figure><picture><img src="https://storage.googleapis.com/alimbolar-bucket/data/public/assets/images/logo/lindberg-logo-400x200px.jpg" alt=""></picture></figure></li>
      <li class="carousel__item"><figure><picture><img src="https://storage.googleapis.com/alimbolar-bucket/data/public/assets/images/logo/maui-jim-logo-400x200px.jpg" alt=""></picture></figure></li>
      <li class="carousel__item"><figure><picture><img src="https://storage.googleapis.com/alimbolar-bucket/data/public/assets/images/logo/l1H1OU-400x200.jpg" alt=""></picture></figure></li>
      <li class="carousel__item"><figure><picture><img src="https://storage.googleapis.com/alimbolar-bucket/data/public/assets/images/logo/silhouette-Logo-400x200px.jpg" alt=""></picture></figure></li>
 
    </ul>
  </article>
</section>
  </main>

CSS

html{
  box-sizing:border-box;
}

*,*:before,*:after{
  box-sizing:inherit;
  margin:0;
  padding:0;
}

img{
  max-width:100%;
  height:auto;
}
body{
  background:grey;
  display:flex;
  justify-content:center;
  align-items:center;
  width:100%;
  height:100%;
}

main{
  width:80%;
  // height:100px;
  background:white;
  display:flex;
  justify-content:center;
  align-items:center;
  section{
    
    border:1px solid maroon;
    padding: 1rem;
  }
}
.carousel{
  width: 500px;
  height:80px;
  // overflow:hidden;
  &__list{
    display:flex;
    // gap:1em;
    position:relative;
  }
  &__item{
    position:absolute;
    padding:0.4rem;
    top:0;
    left:0;
    transition: all 1s;
    width:100px;
    border:1px solid gray;
    
  }
}

JS

const list = document.querySelector('.carousel__list');
let items = list.querySelectorAll('.carousel__item');


function goToSlide(x=0){
  let items = list.querySelectorAll('.carousel__item');
  items.forEach((item,index)=>{
    item.style.transform = `translatex(${(index-x) * 100}%)`
  }); 
}

function addSlide(){
  let items = list.querySelectorAll('.carousel__item');
  const newItem = items[0].cloneNode(true);
  list.appendChild(newItem);
}

function removeSlide(){
  list.removeChild(list.firstChild)
}

// INIT FOR FIRST POSITION AT POSITION 0 BY DEFAULT

goToSlide();

///// FOR SETTIMEOUT IF IT IS USED
// function play(){
//   goToSlide(1);
//   removeSlide();
//   addSlide();
//   setTimeout(play,2000);
// }

// play();

setInterval(function(){
  addSlide();
  goToSlide(1);
  removeSlide();
},2000)





``