Form data being deleted after React-Recaptcha is clicked - reactjs

Question

I am using react-recaptcha on a form on my site. Everything works fine, but when I click the recaptcha, when it returns success, all the form data is deleted. I can of course re-enter it, but that's a terrible UI. Why is it being deleted, and how can I prevent it? Thanks.
Script tag in my index.html file:
<script src="https://www.google.com/recaptcha/api.js?render=explicit" async defer></script>
Component
const RequestADemo = () => {
const [values, setValues] = useState({
recaptcha_verified: false
});
const handleSubmit = (e) => {
if (e) { e.preventDefault() };
if (values.recaptcha_verified) {
requestdemo();
}
};
const handleChange = (e) => {
e.persist();
setValues((values) => ({ ...values, [e.target.name]: e.target.value }));
};
const requestdemo = () => {
let firstname = values.firstname;
fetch("/requestdemo", {
method: "POST",
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({ firstname })
})
.then((res) => res.json())
.then((json) => {
console.log("success");
})
.catch((err) => { console.log("err : ", err) });
}
const recaptchaVerified = (response) => {
setValues({...values, recaptcha_verified: true });
}
return (
<div>
<form onSubmit={ handleSubmit }>
<div className="field">
<label className="label">First Name</label>
<div className="control">
<Input className="input" type="text" name="firstname" onChange={ handleChange } value={ values.firstname || "" } required />
</div>
</div>
<Recaptcha
sitekey="6Lxxxxxxxxxxxxxx"
render="explicit"
verifyCallback={recaptchaVerified}
/>
<button type="submit" className="button is-block is-info is-fullwidth">Submit</button>
</form>
</div>
);
};
export default RequestADemo;