React: empty useState string

Question

I've managed to get through most of this page; I'm feeling accomplished, about to record a .gif of my progress and I've noticed that the <input /> tag isn't clear of it's value after succession via onClick. I need newEmail to be empty upon completion, more as the input field with it's valued to appear clear.

I've been wasting serious time trying to do what should be the easiest task imaginable. Any help? Also, any pro tips regarding anything else would be appreciated.

function EmailSettings() {
    const [newEmail, setNewEmail] = useState("")

    const [addEmail, {
        data: addData,
        error: addErr
    }] = useMutation(ADD_EMAIL)

    useEffect(() => {
        if (addData && addData.addEmail) {
            if (addData.addEmail === true) {
                refetch()

                setNewEmail("")
                console.log(newEmail)

            } else {
                console.log(addErr)
            }
        }
    }, [addData])

    const onAddEmail = email => {
        addEmail({ variables: { input: { email: email } } })
    }
    return (

            <div className={styles.addEmail}>
                <div className={styles.desc}>Add email address</div>
                <input
                    type='email'
                    placeholder='Email address'
                    autoComplete="off"
                    className={styles.addInput}
                    onChange={e => setNewEmail(e.target.value)}
                />
                <button
                    className={styles.addBtn}
                    onClick={() => onAddEmail(newEmail)}
                >
                    Add
                </button>
            </div>

    )
}

Answer 1

You can set the input value to the state

<input
  type='email'
  placeholder='Email address'
  autoComplete="off"
  className={styles.addInput}
  onChange={e => setNewEmail(e.target.value)}
  value={newEmail}
/>

Then set the state value to an empty string upon completion as suggested by @Akiba

const [addEmail, {
        data: addData,
        error: addErr
    }] = useMutation(ADD_EMAIL, {
   onCompleted: () => setNewEmail('')
})