Fomik FormGroup textfields - material-ui

Question

I am working on an application and I have made a form framework -- but there is a request to have dual fields.
Min and Max age
rather then having two fields -- "min_age" and "max_age" -- I think they would want an array field "age"
so instead of min_age: 18 and max_age: 33 --- I think they would want an array - age: [18, 33]
I have seen and implemented Radio and Checkbox groups.
-- but when I've tried to swap out the controlled field to a TextField -- the field is malfunctioning and not changing value.
this is what I have got -- as a textfield array group
<>
<FormGroup
row
name={item.name}
disabled={item.disabled}
{...field}
>
{
item.options.map((itm, j) => {
return (
<FormControlLabel key={j}
disabled={item.disabled}
control={
<div className="field field-text">
<TextField
fullWidth={false}
label={itm.label}
value={field.value[j]}
inputProps={{
maxLength: item.charLimit? item.charLimit:null,
autoComplete: item.autoComplete? item.autoComplete:"off"
}}
rows={(item.type === "comment") ? 6 : null}
multiline={(item.type === "comment") ? true : false}
/>
</div>
}
//label={itm.label}
onChange={(e, value) => {
//form.setFieldValue(item.name, value)
//this.props.onHandle(item.name, itm.value);
}}
/>
)
})
}
</FormGroup>
</>
and this is the radio group field that works just fine -- I've not seen any other example where textfields are controlled by the formgroup
<>
<RadioGroup
row
name={item.name}
{...field}
>
{
item.options.map((itm, j) => {
return (
<FormControlLabel key={j}
value={itm.value}
disabled={itm.disabled}
control={<Radio />}
label={itm.label}
onChange={(e, value) => {
//form.setFieldValue(item.name, value)
this.props.onHandle(item.name, itm.value);
}}
/>
)
})
}
</RadioGroup>
</>
I've tried to wrap tags around it - from this example -- but then the field_names are uncontrolled.
https://codesandbox.io/s/formik-multi-step-set-value-context-wrapper-sezzs?file=/src/App.js:2157-2449
:rf: : "111"
:rh: : "222"
age : 18
age_array : [18, 30]
button_field : "3"