I am using the following form in 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>

On submitting the form, I want the textarea (which I have assigned to a ref) to disappear after 4 seconds have passed with this function I am calling above:

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

function HandleSubmit(event) {
event.preventDefault()
sendEmailAnimation()}

PROBLEM: the code above does not work, BUT if I remove the if-statement for requestAnimationFrame(sendEmailAnimation) so that it always runs THEN it works, but then I would have a never ending loop. With the if statement I only know that somehow the timestamp does not work like it should and remains "undefined", I just have no idea why - Thanks for any support!