调用一个变量的 setState 也更新了另一个状态变量

Question

这是一个显示此行为的示例组件：

const App = () => {
  const [testArray] = useState([{key: "hi", value: "Hello "}, {key: "world", value: "world"}]);
  const [otherState, setOtherState] = useState("Change");

  function renderTestArray() {
    return testArray.map(entry => <span key={entry.key}>{entry.value}</span>);
  }

  function updateTestArray() {
    testArray[0].value = testArray[0].value === "Goodbye " ? "Hello " : "Goodbye ";
    setOtherState((prevState) => prevState === "Change" ? "Test" : "Change");
  }

  return (
    <Fragment>
      <div>
        {renderTestArray()}
      </div>
      <button onClick={updateTestArray}>{otherState}</button>
    </Fragment>
  );
};

当我按下“更改”按钮时，我希望按钮标签会更改，但不会更改“Hello World”消息，因为未调用该数组的 setState。我不明白的是 React 如何获取 testArray 更改然后呈现该更改。另外，即使没有调用 testArray 的 setState，它的更改也如何在后续渲染中持久化。