React State возвращает несинхронизированные данные

У меня есть компонент ниже, который использует хуки React:

import React, {useState} from 'react';

// import components
import TagManagementRow from './TagManagementRow';

const TagManagementList = (props) => {

  const [tagData, setTagData] = useState(props.data);

  const deleteAction = (id) => {
    // Call to backend to delete tag
    const currentData = [];

    for( var i = 0; i <= tagData.length; i++){

      if (i < tagData.length && tagData[i].id !== id) {
        currentData.push(tagData[i]);
      }

      if (i === tagData.length) setTagData(currentData);
    };
  };

  return (
    <ul className = "tagManagement">
      {tagData.map( (tag,i) => {
        return <TagManagementRow name = {tag.name} key = {i} id = {tag.id} delete = {() => deleteAction(tag.id)} />
      })}
    </ul>
  );
}

export default TagManagementList;

Он отображает 4 дочерних компонента TagManagementRow, каждый из которых имеет кнопку удаления. Когда я нажимаю кнопку удаления, все выглядит хорошо, если я выхожу из измененного состояния на консоль, однако в реальном браузере последний элемент в списке удаляется. Я чувствую, что это какая-то проблема рендеринга/времени, но я не могу понять это. Любая помощь от тех, кто лучше разбирается в крючках, будет принята с благодарностью.

Кстати, вот код компонента TagManagementRow:

import React, { useState } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

const TagManagementRow = (props) => {

  const [editTag, setEdit] = useState(false);
  const [tagName, setTagName] = useState(props.name);
  const [tempName, setTempName] = useState('');

  const handleEdit = (e) => {
    setTempName(e.target.value);
  };

  const switchToEdit = () => {
    setEdit(!editTag);
  }

  const saveEdit = () => {
    setTagName(tempName);
    setTempName('');
    switchToEdit();

  }

  return (
    <li>
        <span>
          {tagName}
          <FontAwesomeIcon icon = {["fas","pen"]} onClick = {switchToEdit} />
        </span>

      <span>
        <FontAwesomeIcon icon = {["fas","trash-alt"]} onClick = {props.delete} />
      </span>
    </li>
  );
}

export default TagManagementRow;