无法使用带有Yup库的Formik验证react-select

import React from 'react';
import { Formik, Form, Field, ErrorMessage } from 'formik';
import * as Yup from 'yup';
import Select from 'react-select';

// 使用Yup定义验证规则
const validationSchema = Yup.object().shape({
  selectOption: Yup.string().required('请选择一个选项'),
});

const options = [
  { value: 'option1', label: '选项1' },
  { value: 'option2', label: '选项2' },
  { value: 'option3', label: '选项3' },
];

const App = () => {
  return (
    <Formik
      initialValues={{ selectOption: '' }}
      validationSchema={validationSchema}
      onSubmit={(values) => {
        // 处理表单提交逻辑
        console.log(values);
      }}
    >
      <Form>
        <Field name="selectOption">
          {({ field, form }) => (
            <div>
              <Select
                {...field}
                options={options}
                placeholder="请选择一个选项"
                isSearchable={false}
              />
              <ErrorMessage name="selectOption" component="div" />
            </div>
          )}
        </Field>
        <button type="submit">提交</button>
      </Form>
    </Formik>
  );
};

export default App;