Да, проверка вложенного объекта возвращает ошибку (объекты недействительны в качестве дочернего элемента React)

Это моя форма 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) для вложенного объекта, но Я не вижу разницы.