Formik TextFields are not updated once component is rendered - reactjs

Question

I'm fetching data from the server once component mounts, when I console.log(data) browser shows proper data.
I want to use Formik and MIU TextFields to display data which later on will be updated
const [data, setData] = useState([
{
action: "",
description: "",
tag: "",
category: "",
},
]);
console.log(data);
const [initialValues, setInitialValues] = useState([
{
action: "",
description: "",
tag: "",
category: "",
},
]);
useEffect(() => {
getData();
}, []);
useEffect(() => {
setInitialValues(data);
}, [data]);
const { values, handleChange, handleSubmit, resetForm } = useFormik({
initialValues: initialValues,
validationSchema,
onSubmit: () => {
console.log(values);
axios({
method: "POST",
url: "http://localhost:5000/allActions",
values,
}).then((response) => {
console.log(response);
});
resetForm();
},
});
This is Data component which displays TextFields
const Data = () => {
return (
<form onSubmit={handleSubmit}>
{!data[0].action && "...Loading"}
{data &&
data.map((element, idx) => (
<div key={idx} style={{ marginBottom: "100px" }}>
<Box sx={{ margin: "40px", padding: "20px" }}>
<TextField
variant="outlined"
label="action"
id={`action-${idx}`}
name={`values[${idx}].action`}
value={values[idx]?.action}
onChange={handleChange}
/>
</Box>
<Box sx={{ margin: "40px", padding: "20px" }}>
<TextField
variant="outlined"
label="Description"
id={`desciption-${idx}`}
name={`values[${idx}].description`}
value={values[idx]?.description}
onChange={handleChange}
/>
</Box>
<Box sx={{ margin: "40px", padding: "20px" }}>
<TextField
variant="outlined"
label="tag"
id={`id-${idx}`}
name={`values[${idx}].tag`}
value={values[idx]?.tag}
onChange={handleChange}
/>
</Box>
<Box sx={{ margin: "40px", padding: "20px" }}>
<TextField
variant="outlined"
label="category"
id={`category-${idx}`}
name={`values[${idx}].category`}
value={values[idx]?.category}
onChange={handleChange}
/>
</Box>
</div>
))}
<Button color="primary" variant="contained" type="submit">
Update
</Button>
</form>
);
};
The outcome of above code is that is displays proper amount of TextFields, in this case 3 blocks of 4 TextFields, but it's all empty, none of TextField have filled data which is displayed in console.
Can You please suggest what is wrong that TextFields are not updated ?