Why I have to press a button two times to change the state?

I have a question regarding React.js
Sometimes I have to press a button second time so that it will change the state as what I coded.
For example, I am not sure why I have to press my equals button second time to change the state as what I expected it to be.
Can anyone explain why this happen? Thank you in advance

Below is the link to my codepen.


(I don’t know why it looks like it’s not working, but it works fine after you click inside.)

or the code is here

const {useState} = React;

function App() {
  const [currentValue, setCurrentValue] = useState("0");
  const [preValue, setPreValue] = useState("");
  const [readyToCalculate, setReadyToCalculate] = useState("false");
  const [storeTheOperator, setStoreTheOperator] = useState("");
  const [pressEqualsButton, setPressEqualsButton] = useState("false");

  function handleClick(button) {
    const { value } = button.target;
    appendNum(value);
  }

  function appendNum(num) {
    if (num === "." && currentValue.includes(".")) return;

    if (!isNaN(num) || num === ".") {
      if (currentValue === "0" || currentValue === 0) {
        setCurrentValue(num);
      } else {
        setCurrentValue(currentValue + num);
      }
    }
  }

  function chooseTheOperator(operator) {
    const { value } = operator.target;
    setStoreTheOperator(value);
    if (preValue === "") {
      setPreValue(currentValue);
      setCurrentValue("");
    }

    if (preValue !== "" && currentValue !== "" && storeTheOperator !== "") {
      computation();
    }
  }

  function equals() {
    if (preValue === "" || currentValue === "") return;
    setPressEqualsButton("true");
    if (pressEqualsButton === "true") {
      computation();
    } else {
      return;
    }
  } // has problem,can't change the state

  function computation() {
    let num;
    switch (storeTheOperator) {
      case "+":
        num = parseFloat(preValue) + parseFloat(currentValue);
        break;
      case "-":
        num = parseFloat(preValue) - parseFloat(currentValue);
        break;
      case "x":
        num = parseFloat(preValue) * parseFloat(currentValue);
        break;
      case "/":
        num = parseFloat(preValue) / parseFloat(currentValue);
        break;
      default:
        console.log("something went wrong");
    }

    console.log(pressEqualsButton);

    if (pressEqualsButton === "true") {
      console.log("This is true in computation");
      setCurrentValue(num);
      setPreValue("");
      setStoreTheOperator("");
      setPressEqualsButton("false");
    } else {
      console.log("This is false in computation");
      setPreValue(num);
      setCurrentValue("");
    }
  }

  function deletTheNumber() {
    setCurrentValue(currentValue.slice(0, -1));
  }

  function allClear() {
    setCurrentValue("0");
    setPreValue("");
    setStoreTheOperator("");
    setPressEqualsButton("false");
  }

  return (
    <div className="calculator-grid">
      <div className="display">
        <div className="previous-value">
          {preValue} {storeTheOperator}
        </div>
        <div className="current-value"> {currentValue}</div>
      </div>
      <button value="ac" onClick={allClear} className="span-two">
        AC
      </button>
      <button value="del" onClick={deletTheNumber}>
        Del
      </button>
      <button value="/" onClick={chooseTheOperator}>
        /
      </button>
      <button value="1" onClick={handleClick}>
        1
      </button>
      <button value="2" onClick={handleClick}>
        2
      </button>
      <button value="3" onClick={handleClick}>
        3
      </button>
      <button value="x" onClick={chooseTheOperator}>
        x
      </button>
      <button value="4" onClick={handleClick}>
        4
      </button>
      <button value="5" onClick={handleClick}>
        5
      </button>
      <button value="6" onClick={handleClick}>
        6
      </button>
      <button value="+" onClick={chooseTheOperator}>
        +
      </button>
      <button value="7" onClick={handleClick}>
        7
      </button>
      <button value="8" onClick={handleClick}>
        8
      </button>
      <button value="9" onClick={handleClick}>
        9
      </button>
      <button value="-" onClick={chooseTheOperator}>
        -
      </button>
      <button value="." onClick={handleClick}>
        .
      </button>
      <button value="0" onClick={handleClick}>
        0
      </button>
      <button value="=" onClick={equals} className="span-two">
        =
      </button>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));