how to delete the formik values using field array - reactjs

Question

how can we delete the formik values when using field arrays .So Its gets
deleted from the UI when I delete it , but stays in the formik values.
can I edit/modify formik values directly ?
I am new to react here. Thanks
{
Client:
Phone: [
{
PhoneNumber:"",
PhoneType:""
}
]
}
I am able to delete the occurrence from the state, but formik values still retains the values.
const Phone = ({ title, binding }) => {
const [phones, setPhones] = useState([])
return (
<Fragment>
<Grid item xs={12} md={6}>
<SectionField
title={title}
name={binding + `.Phone.PhoneNumber`}
required
label="Phone"
fullWidth
type="tel"
component={TextField}
/>
</Grid>
<Grid item xs={12} sm={3}>
<SectionField
title={title}
name={binding + `.Phone.PhoneType`}
required
defaultValue={{ label: "", value: "" }}
label="Phone Type"
suggestions={phoneTypes}
component={MuiReactSelect}
/>
</Grid>
<IconButton onClick={() => {
setPhones(currentValue => [...currentValue, {
id: generate(),
PhoneNumber: "",
PhoneType: ""
}])
}}>
<AddBoxIcon fontSize="large" />
</IconButton>
{phones.map((p, index) => (
<Fragment key={p.id}>
<Grid item xs={12} md={5}>
<SectionField
title={title}
name={binding + `.Phone[${index}].PhoneNumber`}
required
label="Phone"
fullWidth
type="tel"
component={TextField}
/>
<ErrorMessage name={`Client.Phone.${index}.PhoneNumber`} /><br />
</Grid>
<Grid item xs={12} sm={3}>
<SectionField
title={title}
name={binding + `.Phone[${index}].PhoneType`}
required
defaultValue={{ label: "", value: "" }}
label="Phone Type"
suggestions={phoneTypes}
component={MuiReactSelect}
/>
</Grid>
<IconButton onClick={() => {
setPhones(currentPhone =>
currentPhone.filter(x => x.id !== p.id))
}}>
<RemoveCircleIcon fontSize="large" />
</IconButton>
</Fragment>
))}
</Fragment>
)
};export default Phone;
Formik values:
======================================================
"Phone": {
"0": {
"PhoneNumber": "8578882942",
"PhoneType": "Home"
},
"PhoneNumber": "8578882942",
"PhoneType": "Home"
},

Answer 1

I got into same sort of inconvenience when i wanted to delete that element from Ui but its values in formik stays there.
What i did was use formik's setFieldValue: (field: string, value: any, shouldValidate?: boolean) => void
So lets say you are using a button to remove that element from UI so i added an extra something to it like this to its onClick property :
//formik.setFieldValue({name of the element that you want to delete})
onClick = {()=>{
//whatever work you need to do for removing it from ui
//then
//formik.setFieldValue({name of the element that you want to delete})
formik.setFieldValue(index)
// here index was the name of variable that i used for that element
}}
Then in the formik's useFormik() hook i did something like this:
const formik = useFormik({
initialValues: {
//your initial values
},
onSubmit: (values) => {
// your onSubmit
},
setFieldValue: (field) => {
delete values.field;
},
});
Sorry i know that this answer is late but i hope it would help someone