Массив вместо удаления элементов увеличивается в двое JS

Элементы добавляются хорошо, но при удалении элемента начинается интересное!

При удалении элемента, элемент удаляется:

Смотрим в консоль: Размер массива 3 элемента, при открытии же 5. Оставшиеся элементы дублируются.

Снова удаляем элемент и эти дубликаты, уже отобожаются в html, а в консоле снова удвоение:.

Что здесь не так, не могу понять.

Код прикладываю:

   var imgLoads = []

   inputFile.addEventListener('change', (e) => {
      addFiles(inputFile.files)
   })

  const addFiles = (files) => {
    modalLoads.replaceChildren()
    let count = 0
    for (let key in files) {

      imgLoads.push(files[key])
            

      let el = createImageElement(count)
      count++

      modalLoads.appendChild(el)
    }
  }



  function createImageElement(title, url, id) {
    let modalCard = document.createElement('div')
    modalCard.classList.add('modal__card')
    modalCard.setAttribute('id', id)

    let modalCardClose = document.createElement('div')
    modalCardClose.classList.add('modal__card-close')
    modalCardClose.innerText = 'x'

    modalCard.appendChild(modalCardClose)

    modalCardClose.addEventListener('click', () => {
      let id = modalCardClose.parentNode.id
      imgLoads.splice(id, 1)
      addFiles(imgLoads)
    })

    return modalCard
  }