这两个状态更新在反应之间有什么区别？

我正在学习React课程，当时讲师正在解释有关更新状态的信息，但我无法理解这两个片段在内部的真正区别，请参见下面的代码笔链接：

直接更新状态代码段

class Counters extends Component {
  state = {
    counters: [
      { id: 1, value: 4 },
      { id: 2, value: 0 },
      { id: 3, value: 0 },
      { id: 4, value: 0 }
    ]
  };

  handleIncrement = counter => {
    const updatedCounters = [...this.state.counters];
    updatedCounters[0].value++;
  };
}

间接更新状态，然后保存代码段

class Counters extends Component {
  state = {
    counters: [
      { id: 1, value: 4 },
      { id: 2, value: 0 },
      { id: 3, value: 0 },
      { id: 4, value: 0 }
    ]
  };

  handleIncrement = counter => {
    const updatedCounters = [...this.state.counters];
    const index = updatedCounters.indexOf(counter);
    updatedCounters[index] = {...counter};
    updatedCounters[index].value++;
    this.setState({ counters: updatedCounters });
  };
}

在本讲座中，讲师解释说第一个代码片段确实会直接更新状态。所以我的问题是，如果第一个示例（如讲师所述）直接更新状态，那么阻止第二个代码段直接更新状态的唯一事情就是下面的代码行：

updatedCounters[index] = {...counter};

如果是这样，它将如何运作？