не работает функция addEventListener с template

Только недавно начал изучать js, так что сразу извиняюсь,если вопрос глупый

У меня есть template, который отрисовывает метки и попап По нажатию на эти метки должен вылезать этот попап, но этого не происходит.

var mapPinsTemplate = template.content.querySelector('.map__pin')

mapPinsTemplate.addEventListener('mouseup', function(){
createCard(mainAds())
})

createCard -это функция которая отрисовывает этот попап из функции массива данных mainAds()

сам template

    <template>
  <article class="map__card popup">
    <img src="img/avatars/user01.png" class="popup__avatar" width="70" height="70">
    <button class="popup__close">Закрыть</button>
    <h3>Уютное гнездышко для молодоженов</h3>
    <p class="popup__text--address"><small>102-0082 Tōkyō-to, Chiyoda-ku, Ichibanchō, 14−3</small></p>
    <p class="popup__price">5200&#x20bd;/ночь</p>
    <h4 class="popup__type">Квартира</h4>
    <p class="popup__text--capacity">2 комнаты для 3 гостей</p>
    <p class="popup__text--time">Заезд после 14:00, выезд до 10:00</p>
    <ul class="popup__features">
      <li class="feature feature--wifi"></li>
      <li class="feature feature--dishwasher"></li>
      <li class="feature feature--parking"></li>
      <li class="feature feature--washer"></li>
      <li class="feature feature--elevator"></li>
      <li class="feature feature--conditioner"></li>
    </ul>
    <p  class="popup__description">Великолепная квартира-студия в центре Токио. Подходит как туристам, так и бизнесменам. Квартира полностью укомплектована и недавно отремонтирована.</p>
    <ul class="popup__pictures">
      <li><img src="" width="45" height="40"></li>
    </ul>
  </article>

и собственно, эта функция

var adTeplate = template.content.querySelector('.map__card')
    function createCard(array){
    for(var i = 0; i < countUser; i++) {
        var cardTemplate = adTeplate.cloneNode(true)
        cardTemplate.querySelector('.map__card img').src = array[i].author.avatar
        cardTemplate.querySelector('h3').textContent = array[i].offer.title
        cardTemplate.querySelector('.popup__text--address small').textContent = array[i].offer.address
        cardTemplate.querySelector('.popup__price').textContent = array[i].offer.price + ' ₽/ночь'
        cardTemplate.querySelector('.popup__type').textContent = translateType(array[i].offer.type.toUpperCase())
        cardTemplate.querySelector('.popup__text--capacity').textContent = array[i].offer.rooms + ' ' + 'комнаты для' + ' ' + array[i].offer.guests + ' ' + ' гостей'
        cardTemplate.querySelector('.popup__text--time').textContent = 'Заезд после' + ' ' + array[i].offer.checkin + ',' + 'выезд до' + ' ' + array[i].offer.checkout
        cardTemplate.querySelector('.popup__features').innerHTML = ''
        cardTemplate.querySelector('.popup__features').appendChild(renderFeature(array[i].offer.features))
        cardTemplate.querySelector('.popup__description').textContent = array[i].offer.description
        cardTemplate.querySelector('.popup__pictures li').innerHTML = ''
        cardTemplate.querySelector('.popup__pictures li').appendChild(renderPhoto(array[i].offer.photos))
        mapFilterContainer.insertAdjacentElement('afterbegin', cardTemplate)
        map.appendChild(cardTemplate) 

    }

   return cardTemplate

}

При этом если я вывожу в консоль mapPinsTemplate или adTeplate, то элементы находятся и отображаются в консоли