Почему в аргумент функции не передается элемент?

Помогите решить проблему. На странице расположены карточки с фото и подписью к фото. Карточки генерируются из массива с помощью template. Реализован попап который всплывает при клике на картинку, и состоит из фото и подписи, линк на фото и текст подписи берутся из карточки на фото которой кликнули. Всплытие и наполнение попапа осуществляет функция fillPopup из кода ниже, но проблема в том что в ее аргумент приходит #document-fragment вместо нужного элемента. Не могу понять почему.

const cardTemplate = document.querySelector('.template-card').content;
const cardsList = document.querySelector('.cards__items');
const imageOfPopup = document.querySelector('.popup__img');
const titleOfPopupImage = document.querySelector('.image-title');
const newCard = {name: "", link: ""};

  //создает карту
  function createCard(el) {
    const card = cardTemplate.cloneNode(true);
    card.querySelector('.cards__title').textContent = el.name;
    card.querySelector('.cards__image').src = el.link;
    setListeners(card);
  cardsList.prepend(card);
  }

  //вешает слушатели
  function setListeners(ele) {
    debugger;
    ele.querySelector('.cards__delet-button').addEventListener('click', handleDelete);
    ele.querySelector('.cards__image').addEventListener('click', () => {fillPopup(ele)});
    ele.querySelector('.cards__like-button').addEventListener('click', like);
  }

//наполняет popup с картинкой
function fillPopup(item) {
  imageOfPopup.src = item.querySelector('.cards__image').src;
  titleOfPopupImage.textContent = item.querySelector('.cards__title').textContent;
  openPopup(popupImg);
  };