Почему при клике на элемент массива не возвращает элемент а undefined

const carts = document.querySelectorAll('.main-product__color-card');
   for(i = 0; i < carts.length; i++){
     carts[i].classList.remove('_active');
     carts[i].addEventListener('click', () => {
      console.log(carts[i]);
      })
    }