Estoy tratando de escribir una función que establezca un valor con el resultado de una resta.

El valor sustraído es una entrada del usuario que se almacena en una variable. De todos modos, el número correcto se representa solo durante una fracción de segundo, y luego se muestra el valor anterior nuevamente.

¿Tienes alguna idea? ¡Gracias!

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

Esta entrada establece el valor sustraído:

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

Este es el componente donde se llama addScorePlayer1:

 <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>