嵌套对象的Yup验证返回错误（对象作为React子对象无效）

Question

这是我想通过Formik进行验证的yup表单

{
  "images": [],
  "fundingGoal": 1337,
  "name": {
    "en": "english name",
    "fr": "french name"
  },
  "description": {
    "en": "english project desc",
    "fr": "french project desc"
  },
  "country": "Anguilla",
  "city": "city",
  "address": "address",
  "location": "",
  "socialMedia": "facebook",
  "contact": "contact",
  "currency": "USD",
  "sdgs": [
    "NO_POVERTY"
  ]
}

我当前的yup模式：

const ProjectInputSchema = yup.object().shape({
    id: yup.string(),
    name: yup.object().shape({
        en: yup.string().required(),
        fr: yup.string()
    }),
    description: yup.object(),
    images: yup.array(),
    ...
});

如何使用name对象呈现表单：

<Form.Group as={Col} md={{span: 5}} controlId="projectName">
    <Form.Label>
        {t('projectName')}
    </Form.Label>
    {
        <Form.Control
            type="text"
            name="name.en"
            value={(values['name'] as I18n).en}
            onChange={handleChange}
        />
    }
    ...

一旦我在name或description中键入一个字符，就会出现以下控制台错误：

  

未捕获（已承诺）错误：对象作为React子对象无效（找到：带有键{fr}的对象）。如果要渲染子级集合，请改用数组。

我遵循了嵌套对象的示例实现（https://codesandbox.io/s/y7q2v45xqx），但看不出有什么区别。