I am using email.js to send emails client side, and validator to validate the email and phone number. Everything works fine, except... I am trying to empty the input fields after a successful submission.

Here is what I have so far:

State management:

    const formRef = useRef()
    const [emailError, setEmailError] = useState('')
    const [phoneError, setPhoneError] = useState('')


    const [inputValues, setInputValues] = useState({email: "", phone: ""})
    const handleOnChange = event => {
        const { name, value } = event.target;
        setInputValues({ ...inputValues, [name]: value });
        validateEmail(inputValues.email)
        validatePhone(inputValues.phone)
    };

Validation and Submit handler:

    const validateEmail = (email) => {
        if (validator.isEmail(email)) {
            setEmailError('Valid Email :)')
            return true
        } else {
            setEmailError('Enter valid Email!')
             return false
        }
       
    }
    const validatePhone = (phone) => {
        if (validator.isMobilePhone(phone)) {
            setPhoneError('Valid Phone :)')
            return true
        } else {
            setPhoneError('Enter valid Phone!')
            return false
        }
    }

    const handleSubmit = (e) => {
        e.preventDefault()

        const isValidEmail = validateEmail(e.target.email.value)
        const isValidPhone = validatePhone(e.target.phone.value)

        if(isValidEmail && isValidPhone){
            console.log("if both inputs are true, on to submit")

            setSentMessage(false)
       
            //shouldnt this line empty out the current fields?
            setInputValues({email: "", phone: ""})
        } else {
            console.log("one of the inputs is false, wont submit")
        }
    }

Form:

<form ref={formRef} onSubmit={handleSubmit} className={classes.contactPageInputs}>

                <input placeholder='email' type="text" id="userEmail" name="email" onChange={(e) => handleOnChange(e)}></input>
                    <span style={{fontWeight: 'bold', color: 'red' }}>{emailError}</span>
                <input placeholder='phone' id="userPhone" name="phone" onChange={(e) => handleOnChange(e)}></input> <br />
                    <span style={{fontWeight: 'bold', color: 'red' }}>{phoneError}</span>
                <button className={classes.submitButton}>submit</button>
</form>

QUESTION: How can I reset the input fields after submission?