reactjs - 无法使用 Formik 和 Material UI 渲染表单

Question

我正在尝试使用 Formik 和 Material UI。这是一个非常基本的示例，正​​在尝试处理。但是，我收到以下错误：React.Children.only expected to receive a single React element child.

这个错误出现在 Formik 开始的那一行，即：

export default function sample() {
    const classes = useStyles({});
    const [sent, setSent] = React.useState(false);
    const handleSubmit = () => {
       console.log('done');
    };
return (
        <Row type="flex">
            <Typography variant="h3" >
                YO
               </Typography>
            <Typography variant="body2" align="center">
                YO YO
             </Typography>
            <Formik
                initialValues={{
                    fname: '',
                    lname: '',
               }}
                validationSchema={YOYOSCHEMA}
                onSubmit={handleSubmit}
            >
                {({ isSubmitting }) => (
                    <Form>
                        <Grid container spacing={2}>
                            <Grid item xs={12} sm={6}>
                                <Field
                                    autoFocus
                                    component={CustomTextField}
                                    autoComplete="fname"
                                    fullWidth
                                    label="First name"
                                    name="firstName"
                                    required
                                />
                            </Grid>
                            <Grid item xs={12} sm={6}>
                                <Field
                                    component={CustomTextField}
                                    autoComplete="lname"
                                    fullWidth
                                    label="Last name"
                                    name="lastName"
                                    required
                                />
                            </Grid>
                        </Grid>
</Form>
                )};
                </Formik>
        </Row >
    )
}

编辑：这是 customtextfield 代码。在内部使用 Material UI 的 TextField：

 const CustomTextField = ({
        autoComplete,
        input,
        InputProps,
        meta: { touched, error, submitError },
        ...other
    }: { autoComplete: any, input: any, InputProps: any, meta: any }) => (
            <TextField
                error={Boolean(touched && (error || submitError))}
                {...input}
                {...other}
                InputProps={{
                    inputProps: {
                        autoComplete,
                    },
                    ...InputProps,
                }}
                helperText={touched ? error || submitError : ''}
            />
        );

我正在使用 YUP 进行验证。如何修复错误？谢谢。