react-hook-forms不使用defaultValue验证react-select控件

import React, { useEffect } from "react";
import { useForm } from "react-hook-form";
import Select from "react-select";

const MyForm = () => {
  const { register, handleSubmit, setValue, errors } = useForm();

  useEffect(() => {
    register({ name: "mySelect" }, { required: "请选择一个选项" });
  }, [register]);

  const handleSelectChange = (selectedOption) => {
    setValue("mySelect", selectedOption); // 将选项值设置到表单状态中
  };

  const onSubmit = (data) => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Select
        options={[
          { value: "option1", label: "选项1" },
          { value: "option2", label: "选项2" },
          { value: "option3", label: "选项3" }
        ]}
        onChange={handleSelectChange}
      />
      {errors.mySelect && <span>{errors.mySelect.message}</span>}
      <button type="submit">提交</button>
    </form>
  );
};

export default MyForm;