Переместите карусель с помощью клавиш со стрелками, выполняя прокрутку с плавным поведением

Question

Я реализовал карусель / слайдер на чистом CSS + немного ванили javascript для перемещения между слайдами с помощью клавиатуры.

Однако поведение при перемещении от стрелок клавиатуры не является поведением что я ожидал Это работает довольно хорошо, переходя от одного слайда к другому. Но когда я нажимаю клавишу со стрелкой несколько раз до завершения плавного перехода, он не перемещается к соответствующему слайду.

Пример: я на слайде №1. Я нажимаю ПРАВУЮ кнопку 3 раза до завершения плавного перехода. Вместо того, чтобы переходить к слайду № 4, переходите к слайду № 2 и производите некрасивый эффект.

Пример GIF (Между каждым слайдом я нажимаю стрелку несколько раз):

Пример кода :

const LEFT = 37
const RIGHT = 39

function move(position) {
  const carousel = document.querySelector('.carousel')
  const { scrollLeft, offsetWidth } = carousel
  const left = position === LEFT 
              ? scrollLeft - offsetWidth
              : scrollLeft + offsetWidth

  carousel.scroll({ left, behavior: 'smooth' })
}

function onKeyUp(e) {
 const code = e.keyCode || e.key
 if(code === LEFT || code === RIGHT) move(code)
}

window.addEventListener('keyup', onKeyUp)

.carousel {
  display: flex;
  width: 100%;
  height: 200px;
  overflow-x: auto; 
  scroll-snap-type: x mandatory;
}

.carousel .item {
  flex-shrink: 0;
  width: 100%;
  color: white;
  font-size: 40px;
  text-align: center;
  scroll-snap-align: center;
}

.carousel .item:nth-child(even) {
  background-color: red;
}

.carousel .item:nth-child(odd) {
  background-color: blue;
}

/* HIDE SCROLL BAR */
/* Safari / Chrome */
.carousel::-webkit-scrollbar-track,
.carousel::-webkit-scrollbar,
.carousel::-webkit-scrollbar-thumb {
  width: 0 !important;
}
.carousel {
 /* Firefox */
 scrollbar-width: none;
 /* IE */
 -ms-overflow-style: none;
}

<div class="carousel">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>