I'm trying to write a function that sets a value with the result of a subtraction.

The subtracted value is an input from the user that is stored in a variable. Anyway, the correct number is rendered only for a fraction of a second, and then the old value is displayed again.

Do you have any ideas? Thanks!

const addScorePlayer1 = () => {
    if (isNaN(player1ScoreInput)) setPlayer1Score(player1Score);
    else {  
        setPlayer1Score(player1Score - player1ScoreInput);
    }
  };

This input sets the subtracted value:

 <input
          type="text"
          placeholder={`Enter ${player1} score:`}
          onChange={(e) => {
            setPlayer1ScoreInput(e.target.value);
          }}
        />

This is the component where addScorePlayer1 is called:

<div className={`game-board ${newGameIsVisible}`}>
      <div className="div1">
        <h1 className="points">{player1Score}</h1>
        <h4 className="player-name">{player1}</h4>
      </div>
      <div className="div2">
        <h1 className="points">{player2Score}</h1>
        <h4 className="player-name">{player2}</h4>
      </div>
      <div className="div3">
        <input
          type="text"
          placeholder={`Enter ${player1} score:`}
          onChange={(e) => {
            setPlayer1ScoreInput(e.target.value);
          }}
        />
        <ArrowCircleRightRoundedIcon
          className="btn-arrow"
          onClick={addScorePlayer1}
        />
      </div>
      <div className="div4">
        <input
          type="text"
          placeholder={`Enter ${player2} score:`}
          onChange={(e) => {
            setPlayer2ScoreInput(e.target.value);
          }}
        />
        <ArrowCircleRightRoundedIcon className="btn-arrow" />
      </div>
      <div className="div5">
        <p>CIAO</p>
      </div>
      <div className="div6">
        <p>CIAO</p>
      </div>
      <div className="div7">
        <p>CIAO</p>
      </div>
      <div className="div8">
        <p>CIAO</p>
      </div>
    </div>