javascript – função splice não está excluindo o item correto

Estou fazendo uma todo list, quando excluir um elemento quero que ele desapareça da tela, assim como quando recarregar a página só sejam mostrados os elementos que estavam lá antes de ser recarregada.

Estou usando o método splice no array que contém os textos dos elementos, para quando clicar no botão de x este elemento(texto) seja tirado do array, e então setado para o localStorage, para cada elemento do array seja enevelopado com HTML e renderizado na tela quando recarregar.

Quando clico no botão, o elemento desaparece da tela, porém quando recarrego a página começa a se comportar de forma estranha mostrando items que já foram excluidos, ao que parece excluindo items com um 1 index superior. Ex: Index=3 e está excluindo o 4. Porém ainda não tenho certeza se realmente é isso.

Não estou encontrando onde estou errando já que quando dou um console.log no index do elemento antes de usar o método splice ele sempre mostra o index do elemento que realmente deve excluir, mas depois quando printo o array excluiu outro elemento no lugar (pelo menos para alguns elementos, outros não).

Veja todos os arquivos do projeto em todo-list arquivos

Veja a página gerada em página todo-list

const itemForm=document.getElementById("itemForm");
const itemInput=document.getElementById("itemInput");
const clearList=document.getElementById("clear-list");
const feedback=document.querySelector(".feedback");
const itemList=document.querySelector(".item-list");
let items=();

function handleItem(e){
    e.preventDefault();
    if(itemInput.value.trim()==""||itemInput.value==""){
        feedback.innerHTML = 'Please Enter Valid Value';
        feedback.classList.add('showItem', 'alert-danger');
        setTimeout(
            function(){
                feedback.classList.remove('showItem');
                }, 3000);
    }
    else{
        addItemToUi(itemInput.value)
    }
}

function addItemToUi(itemName){
    let element=document.createElement("div");
    element.classList.add("item","my-3");
    element.insertAdjacentHTML("beforeend",
        `<h5 class="item-name text-capitalize">${itemName}</h5>
        <div class="item-icons">
        <a href="#" class="complete-item mx-2 item-icon" title="checar item" ><i class="far fa-check-circle"></i></a>
        <a href="#" class="edit-item mx-2 item-icon" title="editar item"><i class="far fa-edit"></i></a>
        <a href="#" class="delete-item item-icon" title="excluir item"><i class="far fa-times-circle"></i></a>`)
    element.addEventListener("click",chooseButton)    
    itemList.appendChild(element);    
    itemInput.value="";
    items.push(itemName);
    setToLocalStorage()
    };
    
//Função que está dando problema
 function chooseButton(event){
    let itemName=this.querySelector("h5")
    if(event.target.classList.contains("fa-check-circle")){
        itemName.classList.toggle("completed");
        event.target.classList.toggle('visibility');
    }
    else if(event.target.classList.contains("fa-edit")){
        itemInput.value=itemName.textContent;
        itemList.removeChild(this);
    }
    //ao clicar no botão de x essa parte do código está dando com bug
    else if(event.target.classList.contains("fa-times-circle")){
        let elementIndex=items.indexOf(itemName.textContent)
        console.log(elementIndex)//index do elemento que deve ser excluido
        let excludedElement=items.splice(items.indexOf(elementIndex),1)
        console.log(excludedElement)//elemento que foi excluido
        console.log(items)//array de elementos depois da exclusão de um elemento
        itemList.removeChild(this);
        setToLocalStorage()
    }
 }

 function clearItems(){
    itemList.innerText='';
    items=();
    setToLocalStorage()
 }

 function setToLocalStorage(){
    if(!!localStorage.getItem("items")){
        localStorage.removeItem("items");
    }
    localStorage.setItem("items",JSON.stringify(items));
 }
 function getDataFromLocalStorage(){
    if ( localStorage.getItem('items')=== null){
        return
    }
    else{
        let itemsName=JSON.parse(localStorage.getItem('items'))
        itemsName.forEach(item=>addItemToUi(item))
    }
 }
//event listeners
itemForm.addEventListener("submit",handleItem);
clearList.addEventListener("click",clearItems)
getDataFromLocalStorage()