Why the form can't be submited instantly?

I tried to submit the form instantly after the last keystroke typing and clicking the left mouse button so fast without any delay and clicket almost in milliseconds consequently event isn't called . If I try slowly giving time my hand to move to mouse button then click it ,works fine n normal but without any delay in milliseconds the eventhandler can't be called ? Why

const number_handler =()=>{console.log("INput ref clicked");}
const button_clicked =()=>{console.log("button clicked")}

const Userform = ()=>{
console.log("userForm")
const Name_ref = useRef();
const Age_ref = useRef();
const SubmitNewUser=(e)=>{e.preventDefault();console.log("Submit handler called");}
    return  (
        <form className={styles.form} onSubmit={SubmitNewUser}>
            <div>
                <label>Name</label>
                <br></br>
                <input type="text" ref={Name_ref}/>
            </div>
            <div>
                <label>Age</label>
                <br></br>
                <input type="number" ref={Age_ref} onChange={number_handler}/>
            </div>
            <div>
                <button type="Submit" onClick={button_clicked}>Add User</button>
            </div>
        </form>
    )
}
export default Userform