Editando o Dom [Dúvida]

Porque quando clico no ícone do lápis não identifica para trocar e mudar o objeto? Exemplo: Coloco a palavra Suco, clico no lápis e não interage, só se eu clicar na palavra Suco ai sim consigo Editar e mudar, até salva se clicar no Icone de lápis volta tudo de novo.

Vou enviar parte do meu código

 const editarItem = document.querySelectorAll(".editar") 

    editarItem.forEach(i => {
        i.addEventListener('click', (evento) =>{
            itemAEditar = evento.target.parentElement.parentElement.getAttribute('data-value')
            mostrarItem()
            //console.log(itemAEditar)
         })                                                                        

        })
    }

    function salvarEdicao(){
        const itemEditado = document.querySelector(`[data-value = "${itemAEditar}"] input[type = "text"]`)
        console.log(itemEditado.value)

    }