[Dúvida] innerHTML e addEventListener

gostaria de saber porque esse codigo nao funciona, ainda nao consegui entender erro da logica

function adicionarProdutoAoHTML(produto) {
    const section = document.querySelector('.card__section');
    const produtoHTML = `
        <div class="main__meus__produtos">
            <div class="card">
                <img src="${produto.imagem}" alt="Imagen del producto">
                <div class="card-container--info">
                    <p>${produto.name}</p>
                    <div class="card-container--value">
                        <p>$ ${produto.valor}</p>
                        <button class="apagar" id="${produto.id}">
                            <img src="./assets/lixeira-de-reciclagem.png"  alt="Ícono de excluir">
                        </button>
                    </div>
                </div>
            </div>
        </div>`;
    section.innerHTML += produtoHTML;
    
    const botao = document.getElementById(produto.id);
    botao.addEventListener('click', async function(){
        const pergunta = prompt('tem certeza que deseja excluir esse produto?');
        if(pergunta == "sim") {
            await API.deleteProdutos(produto.id);
        }
    });
}

apiArray.forEach(produto => {
    adicionarProdutoAoHTML(produto);
});