Errors of select items don't show on submit

[Illia]

My form contains one multiselect and group of selects generated by FieldArray from formik module:

<Form.Item name="learnedLanguages">
    <Select mode="multiple" name="learnedLanguages" placeholder="Languages you know">
        <Select.Option value="English">English</Select.Option>
        <Select.Option value="Spanish">Spanish</Select.Option>
    </Select>
</Form.Item>
<FieldArray
    name="languagesToLearn"
    render={(arrayHelpers) => (
    <div>
        {values.languagesToLearn && values.languagesToLearn.length > 0 &&
            values.languagesToLearn.map((languagesToLearn, key) => (
                <div key={key}> //<-- tried to change this div to Form.Item with name `languagesToLearn.${key}` but it throws an error 
                    <Form.Item name={`languagesToLearn.${key}.language`}>
                        <Select name={`languagesToLearn.${key}.language`} placeholder="Language to learn">
                            <Select.Option value="English">English</Select.Option>
                            <Select.Option value="Spanish">Spanish</Select.Option>
                        </Select>
                    </Form.Item>
                    <Form.Item name={`languagesToLearn.${key}.knowledgeLevel`}>
                        <Select name={`languagesToLearn.${key}.knowledgeLevel`} placeholder="Knowledge level">
                            <Select.Option value="Beginner">Beginner</Select.Option>
                            <Select.Option value="Intermediate">Intermediate</Select.Option>
                            <Select.Option value="Advanced">Advanced</Select.Option>
                        </Select>
                    </Form.Item>
                    <MinusCircleOutlined onClick={() => arrayHelpers.remove(key)} />
                </div>
            ))}
        <Form.Item name="addLanguageToLearn">
            <Button name="addLanguageToLearn" type="dashed" onClick={() => arrayHelpers.push('')} block icon={<PlusOutlined />}>
                        Add language
            </Button>
        </Form.Item>
    </div>
)}>
</FieldArray>

For validation I'm using Yup schema:

learnedLanguages: Yup.array()
        .of(
            Yup.string().required("Language is required")//really don't know if I need this check
        )
        .min(1, "Minimum one language is required") // using  'min' for multiselect because 'required' doesn't work
        .max(5, "Max 5 languages"),
languagesToLearn: Yup.array()
        .of(
            Yup.object().shape({
                language: Yup.string().required("Language is required"),
                knowledgeLevel: Yup.string().required("Knowledge level is required")
            })
        )
        .min(1, "Minimum one language is required")// error message for FieldArray
        .max(5, "Max 5 languages")// error message for FieldArray

Validation works okay when fields are touched but doesn't work on form submit for current selects. Even more, the errors that were placed after touching just disappear. Also I can't figure out how to display errors for FieldArray. I tried to use Form.Item as I marked before in code example but it throws an error after clicking on any of generated selects.