How to show the error message for an empty array on the first input field that uses

[florianwalther-private]

I have a bunch of input fields in my form, like this:

<TouchedFeedbackSelect
    label="Language"
    name='languages[0]'
    options={...}
/>

<TouchedFeedbackSelect
    label="Language"
    name='languages[1]'
    options={...}
/>

<TouchedFeedbackSelect
    label="Language"
    name='languages[2]'
    options={...}
/>

Internally, they use Formik's useField hook to handle the error state:

const TouchedFeedbackSelect = ({ label, options, helpText, ...props }: TouchedFeedbackSelectProps & FieldHookConfig<string>) => {
    const [field, meta] = useField(props);

    return (
        <Form.Group className="mb-3" controlId={props.name}>
            <Form.Label id={props.name + "-select-label"}>{label}</Form.Label>
            <Form.Select
                {...field}
                isInvalid={meta.touched && !!meta.error}
                aria-describedby={`${props.name}-feedback" ${props.name}-help`}
                aria-labelledby={props.name + "-select-label"}
            >
                {options}
            </Form.Select>
            <Form.Control.Feedback type="invalid" id={props.name + "-feedback"}>{meta.error}</Form.Control.Feedback>
            <Form.Text id={props.name + "-help"} muted>
                {helpText}
            </Form.Text>
        </Form.Group>
    );
}

export default TouchedFeedbackSelect;

The validation schema requires the array to have one element, meaning that only one select field has to contain a value:

const validationSchema = Yup.object({
    [...]
    languages: Yup.array(Yup.string())
        .min(1, 'Required'),
    [...]
});

Question: How can I let the first input field show the error message when the array is empty? Since I pass languages[0] and not language as the name to the first input field, useField is not connected to the validationSchema.

If my approach is wrong, what's the correct way to show the error message here?

Also, my current setup creates this weird bug where each input field shows one letter of the error message after it was touched: