Estoy usando el siguiente formulario en React

 <form onSubmit={e => {HandleSubmit(e)}}> <div ref={textArea} className="enclosing-divs"> <label className="form-label" htmlFor="message">Message:</label> <textarea className="input-field" style={{ height: "160px", paddingTop: "2px", resize: "none" }} id="message" required /> </div> <button className="submit-button" type="submit"></button> </form>

Al enviar el formulario, quiero que el área de texto (que asigné a una referencia) desaparezca después de que hayan pasado 4 segundos con esta función que estoy llamando arriba:

 function sendEmailAnimation(now) { if (now >= 4000) { textArea.current.style.display = "none"} if (now <= 10000) { requestAnimationFrame(sendEmailAnimation)} } function HandleSubmit(event) { event.preventDefault() sendEmailAnimation()}

PROBLEMA: el código anterior no funciona, PERO si elimino la declaración if para requestAnimationFrame (sendEmailAnimation) para que siempre se ejecute ENTONCES funciona, pero luego tendría un ciclo interminable. Con la declaración if, solo sé que de alguna manera la marca de tiempo no funciona como debería y permanece "indefinida", simplemente no tengo idea de por qué. ¡Gracias por cualquier apoyo!