当从react-select列表中选择选项时，Formik表单返回TypeError

import { useFormik } from 'formik';
import Select from 'react-select';

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

const MyForm = () => {
  const formik = useFormik({
    initialValues: {
      selectedOption: '',
    },
    onSubmit: (values) => {
      console.log(values.selectedOption);
    },
  });

  const handleSelectChange = (selectedOption) => {
    formik.setFieldValue('selectedOption', selectedOption.value);
  };

  return (
    <form onSubmit={formik.handleSubmit}>
      <Select
        options={options}
        onChange={handleSelectChange}
        value={options.find((option) => option.value === formik.values.selectedOption)}
      />
      <button type="submit">Submit</button>
    </form>
  );
};

export default MyForm;

import { useFormik } from 'formik';
import Select from 'react-select';

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

const MyForm = () => {
  const formik = useFormik({
    initialValues: {
      selectedOption: '', // 确保与react-select组件关联的字段正确设置
    },
    onSubmit: (values) => {
      console.log(values.selectedOption);
    },
  });

  const handleSelectChange = (selectedOption) => {
    formik.setFieldValue('selectedOption', selectedOption.value); // 使用formik.setFieldValue更新表单字段的值
  };

  return (
    <form onSubmit={formik.handleSubmit}>
      <Select
        options={options}
        onChange={handleSelectChange}
        value={options.find((option) => option.value === formik.values.selectedOption)}
      />
      <button type="submit">Submit</button>
    </form>
  );
};

export default MyForm;