handleRemoveItem(id) {
        const newResList = this.state.resolutions;

        function del(_i) { 
            delete newResList[_i];
        }

        let filtered = [];
        for(let i = 0; i < newResList.length; i++) {
            if(newResList[i].k === id) {
                let el = document.getElementById(newResList[i].title + newResList[i].k);
                //el.classList.remove('animate__fadeInDown');
                //el.classList.add('animate__fadeOutLeft');
                console.log(el);
                del(i); // delete newResList[i]
            }
        }
        filtered = newResList.filter(function(el) {
            return el != null;
        });
        console.log(filtered);
        this.setState({resolutions: filtered});
    }

Hello! So, I am working on this list in react, when I add two elements to my list, and remove the first one added, it prints the other element that is left in the list. Is this normal? the 'id' is applied on creation of the list element and contains the title + unique ID applied to the object.

Not to say that removing the list element doesn't work, but I've commented out the adding/removing of classes in this code because its being applied to the wrong element!

Any help is greatly appreciated