RadioGroup's in React forms using formik-material-ui - reactjs

Question

I have a multi-page form controlled by a material-ui stepper, with each 'subform' component being brought in via a switch on the stepper value. Works perfectly well. The state is being held by the parent component via judicious use of the useState hook, and the back and forward functions handleBack, and handleNext are being passed in as props.
The issue is, that whilst the Radio buttons are inserted correctly, and the chosen value put back into state, an error seems to stopping the useEffect hook that calculates values for the next subform from firing.
The error is :
Material-UI: A component is changing an uncontrolled RadioGroup to be controlled.
Elements should not switch from uncontrolled to controlled (or vice versa).
Decide between using a controlled or uncontrolled RadioGroup element for the lifetime of the component.
The code looks roughly like this (with the usual Grid components nuked):
import React from 'react'
import { Formik, Field, Form } from 'formik'
import { TextField, RadioGroup } from 'formik-material-ui'
import * as Yup from 'yup'
import { FormControlLabel, Radio, Button, Container } from '#material-ui/core'
import { Styles } from '../Styles'
export default function subForm(props) {
const classes = Styles()
const {
formChoice,
templateChoices,
formTitle,
activeStep,
isLastStep,
handleBack,
handleNext,
templates,
} = props
return (
<div>
<Formik
initialValues={formChoice}
validationSchema={Yup.object({
formChoice: Yup.string().required('Required'),
})}
>
{({
submitForm,
validateForm,
setTouched,
isSubmitting,
values,
setFieldValue,
formChoice,
}) => (
<Container>
<Form>
<Field
name="formChoice"
label="Radio Group"
value={formChoice || ''}
component={RadioGroup} >
{templateChoices.map(({ name, description, index }) => (
<FormControlLabel
value={name}
control={<Radio disabled={isSubmitting} />}
label={name} />
))}
</Field>
</Form>
<div className={classes.buttons}>
{activeStep !== 0 && (
<Button
onClick={() => {
handleBack(values)
}}
className={classes.button} >Back</Button>
)}
<Button
className={classes.button}
variant="contained"
color="primary"
onClick={() =>
validateForm().then(errors => {
if (
Object.entries(errors).length === 0 &&
errors.constructor === Object
) {
handleNext(values)
} else {
setTouched(errors)
}
})
}
>
{isLastStep ? 'Submit Draft' : 'Next'}
</Button>
</div>
</Container>
)}
</Formik>
</div>
)
}
The list of options to display is handed in in templateChoices, and looks roughly like this:
[
{"index":0,"name":"Form 1","description":"The standard form.","version":"1.0"},
{"index":1,"name":"Form 2","description":"The special form.","version":"1.1"}
]
Should I be using a RadioGroup? Is there something I'm forgetting to pass through props?