Javascript, how to alternate class between elements. And go back to original when none of elements is selected

const cards = document.querySelectorAll('.card');

function cardSelect() {
  cards.forEach(card => {
    card.addEventListener('mouseenter', () => {
      card.classList.add('active');
    });
    card.addEventListener('mouseleave', () => {
      card.classList.remove('active');
    });

    //If there's no actived element, then apply active class to the first item
    if (!card.classList.contains('active')) {
      cards[0].classList.add('active');
      //If there's any actived element, then remove the active class from the first item
    } else {
      cards[0].classList.remove('active');
    }
  })
}
cardSelect();

.grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 200px);
  grid-template-areas: "item1 item2 item3" "item4 item5 item6";
}


/* line 1152, ../../PCX/sass/scss/style.scss */

.grid .card {
  color: #fff;
  font-size: 2rem;
  background-color: #0077ff;
  display: flex;
  align-items: center;
  justify-content: center;
}


/* line 1160, ../../PCX/sass/scss/style.scss */

.grid .card.active {
  background-color: #0000ee;
}


/* line 1164, ../../PCX/sass/scss/style.scss */

.grid .item1 {
  grid-area: item1;
}


/* line 1167, ../../PCX/sass/scss/style.scss */

.grid .item2 {
  grid-area: item2;
}


/* line 1170, ../../PCX/sass/scss/style.scss */

.grid .item3 {
  grid-area: item3;
}


/* line 1173, ../../PCX/sass/scss/style.scss */

.grid .item4 {
  grid-area: item4;
}


/* line 1176, ../../PCX/sass/scss/style.scss */

.grid .item5 {
  grid-area: item5;
}


/* line 1179, ../../PCX/sass/scss/style.scss */

.grid .item6 {
  grid-area: item6;
}

<div class="grid">
  <div class="item1 card">ITEM 1</div>
  <div class="item2 card">ITEM 2</div>
  <div class="item3 card">ITEM 3</div>
  <div class="item4 card">ITEM 4</div>
  <div class="item5 card">ITEM 5</div>
  <div class="item6 card">ITEM 6</div>
</div>