在使用formik的多个选择中的react自动完成中的验证问题

import React from 'react';
import { Formik, Field, ErrorMessage } from 'formik';
import Autocomplete from 'react-autocomplete';

<Formik
  initialValues={{ autocompleteValue: '' }}
  validate={values => {
    const errors = {};
    if (!values.autocompleteValue) {
      errors.autocompleteValue = '必填字段';
    }
    return errors;
  }}
  onSubmit={values => {
    // 处理表单提交逻辑
  }}
>

<Field name="autocompleteValue">
  {({ field }) => (
    <Autocomplete
      getItemValue={item => item.label}
      items={[
        { label: '选项1', value: 'option1' },
        { label: '选项2', value: 'option2' },
        { label: '选项3', value: 'option3' }
      ]}
      renderItem={(item, isHighlighted) => (
        <div style={{ background: isHighlighted ? 'lightgray' : 'white' }}>
          {item.label}
        </div>
      )}
      value={field.value}
      onChange={value => field.onChange({ target: { value, name: field.name } })}
      onSelect={value => field.onChange({ target: { value, name: field.name } })}
    />
  )}
</Field>
<ErrorMessage name="autocompleteValue" component="div" className="error" />

<button type="submit">提交</button>