React custom editable grid is preserving values from deleted rows

The <TextField> is using a defaultValue. This means the component is "uncontrolled" in the sense it manages its state internally. Seemingly because of a slightly unexpected quirk of Fluent's behaviour, when the defaultValue changes it is ignored and it retains the internal copy it already has.

You can demonstrate this by setting a key that forces the text field to remount completely when the row deletion causes that item to be in a new position:

<TextField key={item.name + index} defaultValue={item.favColor}></TextField>

This causes all the TextFields to essentially be removed and readded -- circumventing the problem since the TextField will be forced to grab the new initial value.

But I suspect you actually wanted to be editing the dataset itself with the new value. I.e. using TextField as a controlled component via the value prop. The onChange prop here then actually updates the favColor field for the data for the row in question (with the new value, each time a keystroke happens) by deep updating listItems.

        case "favColorColumn": {
          return (
            <TextField
              onChange={(e, newVal) => {
                setListItems((prevListItems) =>
                  Object.assign([], prevListItems, {
                    [index]: { ...prevListItems[index], favColor: newVal },
                  })
                );
              }}
              value={item.favColor}
            ></TextField>
          );
        }