Custom form component with mui and formik - reactjs

Question

Description
I'm working with a formik form using mui for styling, I wanted to replace an input component with something more advanced as shown below:
My intention is to update formik context and make this selection behave as a regular input form. Unfortunatelly I have not found a lot of documentation or examples of this, and I would like to know best practices for a case like this.
What I tried
This is what I tried, I used mui FormControl enclosing some custom HTML. This works but I can not clear the error when the user moves to the next page. See code below:
Question
I would like to know how to manually clear the error in Formik or if there is a better way to achieve this using mui and formik. Any help is appreciated. Thanks.
import React, { useState } from 'react';
import { useFormikContext } from 'formik';
import { at } from 'lodash';
import { useField } from 'formik';
import { FormLabel, FormControl, FormHelperText, Paper, makeStyles } from '#material-ui/core';
import Grid from '#material-ui/core/Grid';
import { clsx } from 'clsx';
const useStyles = makeStyles({
paper: {
padding: 20,
cursor: 'pointer'
},
active: {
color: '#4285F4'
},
label: {
paddingBottom: 20
}
});
export default function Toggle(props) {
const classes = useStyles();
const { name, label, options, ...rest } = props;
const [field, meta] = useField(props);
const [touched, error] = at(meta, 'touched', 'error');
const isError = touched && error && true;
const { values: formValues } = useFormikContext();
const [activeValue, setActiveValue] = useState(formValues[name]);
function _renderHelperText() {
if (isError) {
return <FormHelperText>{error}</FormHelperText>;
}
}
function _handleSelection(event) {
formValues[name] = event.target.dataset.value;
setActiveValue(event.target.dataset.value);
}
return (
<FormControl {...rest} error={isError}>
<FormLabel className={classes.label}>{label}</FormLabel>
<Grid sx={{ flexGrow: 1 }} container spacing={2}>
{options.map((option, index) => (
<Grid key={index} item>
<Paper
name={name}
data-name={name}
data-value={option.value}
onClick={_handleSelection}
className={clsx(classes.paper, { [classes.active]: option.value == activeValue })}>
{option.lowerValue} - {option.higherValue}
</Paper>
</Grid>
))}
</Grid>
{_renderHelperText()}
</FormControl>
);
}
My yup validation section
CreditScore: {
name: 'Credit Score',
render: <CreditScoreStep />,
formField: {
credit_score: {
name: 'credit_score',
label: 'Credit Score',
initial: ''
}
},
validationSchema: Yup.object().shape({
credit_score: Yup.number().required('Credit Score is required')
})
},