Formik axios post data to contact form 7 , empty fields - reactjs

Question

I am trying to send data to contact form 7 using Formik but i get the error of fields that are empty. Can you please guide what is the problem with it. If i remove required fields from contact form 7, the form send an email with empty fields.
import * as React from 'react';
import * as Yup from 'yup';
import axios from 'axios';
import { Formik } from 'formik';
const URL = 'YOUR SITE URL';
const CF7_ID = 'YOUR CONTACT FORM ID';
const formSchema = Yup.object().shape({
formName: Yup.string().required('Required'),
formEmail: Yup.string()
.email('Invalid email')
.required('Required'),
});
/*
function convertJsontoUrlencoded(obj) {
let str = [];
for (let key in obj) {
if (obj.hasOwnProperty(key)) {
str.push(encodeURIComponent(key) + '=' + encodeURIComponent(obj[key]));
}
}
return str.join('&');
}
*/
const CF7 = () => {
const [state, setState] = React.useState(null || '');
return (
<>
<Formik
initialValues={{
formSubject: 'Your message',
formName: 'SAM ',
formEmail: 'salman#gmail.com',
formMessage: 'thisisisibdiad iuasdhasiud aidsuahdsiuahsd',
}}
validationSchema={formSchema}
onSubmit={(values, { setSubmitting }) => {
const submitData = async () => {
try {
const result = await axios({
//body: JSON.stringify(values),
url: `${URL}/wp-json/contact-form-7/v1/contact-forms/${CF7_ID}/feedback`,
headers: {
//Authorization: `Basic ${TOKEN}`,
'content-Type': 'application/json; charset=UTF-8',
//'content-type': 'multipart/form-data'
},
method: 'POST',
data: JSON.stringify(values),
});
setState(result.data.message);
setSubmitting(false);
} catch (error) {
setState('Something Went Wrong');
}
};
submitData();
}}
>
{({ values, errors, touched, handleChange, handleBlur, handleSubmit, isSubmitting }) => (
<form onSubmit={handleSubmit}>
<div>
<label htmlFor="">
Subject
<input
type="text"
name="formSubject"
onChange={handleChange}
onBlur={handleBlur}
value={values.formSubject}
/>
{errors.formSubject && touched.formSubject ? <div>{errors.formSubject}</div> : null}
</label>
</div>
<div>
<label htmlFor="">
Name *
<input
type="text"
name="formName"
onChange={handleChange}
onBlur={handleBlur}
value={values.formName}
/>
{errors.formName && touched.formName ? <div>{errors.formName}</div> : null}
</label>
</div>
<div>
<label htmlFor="">
Email *
<input
type="email"
name="formEmail"
onChange={handleChange}
onBlur={handleBlur}
value={values.formEmail}
/>
{errors.formEmail && touched.formEmail ? <div>{errors.formEmail}</div> : null}
</label>
</div>
<div>
<label htmlFor="">
Message
<input
type="text"
name="formMessage"
onChange={handleChange}
onBlur={handleBlur}
value={values.formMessage}
/>
{errors.formMessage && touched.formMessage ? <div>{errors.formMessage}</div> : null}
</label>
</div>
<button type="submit" disabled={isSubmitting}>
Submit
</button>
</form>
)}
</Formik>
{state ? <p>{state}</p> : null}
</>
);
};
export default CF7;
ERROR:
into: "#"
invalid_fields: [{into: "span.wpcf7-form-control-wrap.formName", message: "The field is required.", idref: null,…},…]
message: "One or more fields have an error. Please check and try again."
posted_data_hash: ""
status: "validation_failed"