javascript - 为什么即使我将值传递给它也没有设置我的第二个输入值（交换功能虽然有效）

Question

我是新来的反应，并试图创建一个基本的应用程序来交换两个值交换部分正在工作但第二个框的初始值已设置但对于第一个它正在工作

import React, { useState } from "react";
import "./App.css";

function Content(props) {
  const { firstName, lastname } = props;
  const [text1, setText1] = useState(firstName);
  const [text2, setText2] = useState(lastname);

  return (
    <div className="content">
      <input
        type="text"
        onChange={function (event) {
          setText1(event.target.value);
        }}
        value={text1}
      />

      <input
        type="text"
        onChange={function (event) {
          setText2(event.target.value);
        }}
        value={text2}
      />

      <button
        onClick={function () {
          // [text1 , text2] = [text2, text1]
          setText1(text2);
          setText2(text1);
        }}
      >
        SWAP
      </button>
    </div>
  );
}

function App() {
  return <Content firstName={"First Name"} lastName={"Last Name"} />;
}

export default App;

https://i.stack.imgur.com/a0EvI.png