Issue rendering TextField with helperText

When I try to render TextField inside Autocomplete component I am getting an error:

Failed prop type: Invalid prop helperText supplied to ForwardRef(TextField), expected a ReactNode.

Here is a code snippet I am trying to render inside AutoComplete component: renderInput={(params) => ( <Field {...params} component={TextField} error={ touched['template'] && !!errors['template'] } helperText={errors['template']} variant="outlined" size="small" fullWidth /> )}

This started when I upgraded from 3.0.0 alpha 0 to 3.0.0. I am using formik-material-ui with formik 2.2.0. I have upgraded packages one by one and it came to formik-material-ui package that is causing the issue. If I use component={TextField} directly from material-ui everything works.

[itsmylife]

When I try to render TextField inside Autocomplete component I am getting an error:

Failed prop type: Invalid prop helperText supplied to ForwardRef(TextField), expected a ReactNode.

Here is a code snippet I am trying to render inside AutoComplete component: renderInput={(params) => ( <Field {...params} component={TextField} error={ touched['template'] && !!errors['template'] } helperText={errors['template']} variant="outlined" size="small" fullWidth /> )}

This started when I upgraded from 3.0.0 alpha 0 to 3.0.0. I am using formik-material-ui with formik 2.2.0. I have upgraded packages one by one and it came to formik-material-ui package that is causing the issue. If I use component={TextField} directly from material-ui everything works.

For the future developers:

it is happening because this helperText={errors['template']} is being used wrong. errors['template'] returns an object. It is react-hook-form error format. See the object https://react-hook-form.com/ts#FieldError So the solution is using it this way: helperText={errors['template']?.message}

Happy hacking.

[cliedeman]

I am going to close this. but will happily take a look if anyway can create a codesandbox with the issue