Problema com a atualização da quantidades de itens na mochila.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet"> 

    <ul class="lista" id="lista">
        <li class="item"><strong>7</strong>Camisas</li>
        <li class="item"><strong>1</strong>Calça</li>
        <li class="item"><strong>3</strong>Casaco</li>
        <li class="item"><strong>3</strong>Meia</li>
        <li class="item"><strong>10</strong>Cuecas</li>
        <li class="item"><strong>2</strong>Tênis</li>
        </html>
    </ul>
</main>
<script src="js/main.js"></script>

const form = document.getElementById("novoItem") const lista = document.getElementById("lista") const itens = JSON.parse(localStorage.getItem("itens")) || [] itens.forEach((elemento) => { criaElemento(elemento)

})

console.log(form) form.addEventListener("submit", (evento)=>{ evento.preventDefault()

const nome = evento.target.elements['nome'] const quantidade = evento.target.elements['quantidade'] const existe = itens.find(elemento => elemento.nome === nome.value) console.log(existe)

const itemAtual = { "nome": nome.value, "quantidade": quantidade.value

}

if(existe){ itemAtual.id = existe.id atualizaElemento(itemAtual) itens[existe.id] = itemAtual } else{ itemAtual.id = itens.length criaElemento(itemAtual) itens.push(itemAtual) }

localStorage.setItem("itens", JSON.stringify(itens) )

nome.value = "" quantidade.value = "" })

function criaElemento (item){

const novoItem = document.createElement('li') novoItem.classList.add("item")

const numeroItem = document.createElement('strong') numeroItem.innerHTML = item.quantidade numeroItem.dataset.id = item.id novoItem.appendChild(numeroItem)

novoItem.innerHTML += item.nome

lista.appendChild(novoItem);

}

function atualizaElemento(item){

document.querySelector("[data-id='"+item.id +"']").innerHTML = item.quantidade; }