Компонент не отображается после разрешения с данными

Question

У меня есть компонент BagPage, который имеет некоторые дочерние компоненты, которые будут отображаться после разрешения обещания getBagByIdAsync, и я хочу добавить прослушиватель события click для некоторых элементов в одном из этих дочерних компонентов сразу после их рендеринга, но продолжаю получать:

Невозможно прочитать свойство 'addEventListener' с нулевым значением

это означает, что я пытаюсь добавить прослушиватель событий до того, как элементы существуют в DOM.

здесьмой код:

function listenToBagRemove(bag) {
    bag.items.forEach(item => {
        document
            .querySelector(`#remove${item.id}`)
            .addEventListener('click', () => {
                return BagService.deleteItemByIdAsync(bagId, item.id);
            });
    });
}

async function BagPage(bagId) {
let bag;

try {
    bag = await BagService.getBagByIdAsync(bagId).then(res => {
        listenToBagRemove(res);
    });
} catch (e) {
    console.log(e);
    return '<div class="error">Error loading bag items...</div>';
}

return `<div class="page">
            ${Header(bag.items)}
            ${ProductsList(bag.items)}
            ${Footer()}
        </div>`;
}

export default BagPage;

и код для каждой карты продукта в списке продуктов:

const ProductCard = item => `<div class="product-card">
                <div class="remove-btn" id="remove${item.id}">
                    <img src="${closeIcon}" />
                </div>
                <div class="image-container">
                    <img class="image" src="${item.image}" />
                </div>
                <div class="info-container alignCenter">
                    <div class="brandName">${item.name}</div>
                    <div class="price">€${item.price}</div>
                </div>
            </div>`;

export default ProductCard;