React结合react-hook-form开发时出现Cannot update a component while rendering a different component错误的解决求助

我现在遇到一个头疼的问题，我的网站好几个页面都弹出这个错误，折腾了好久也没摸透到底哪里出问题。我跟着错误提示里的链接看了个几年前的GitHub issue，也搜了不少类似的帖子，但感觉每个情况都有点不一样，没找到完全匹配的解决办法。

下面是具体的错误信息：

chunk-22DY4X5X.js?v=6b31ce6b:521 Warning: Cannot update a component (`OrderCreateForm`) while rendering a different component (`Controller`). To locate the bad setState() call inside `Controller`, follow the stack trace as described in https://reactjs.org/link/setstate-in-render
    at Controller (http://localhost:5173/node_modules/.vite/deps/react-hook-form.js?v=6b31ce6b:321:35)
    at FormField (http://localhost:5173/src/components/ui/form.tsx:18:25)
    at div
    at form
    at FormProvider (http://localhost:5173/node_modules/.vite/deps/react-hook-form.js?v=6b31ce6b:103:11)
    at OrderCreateForm (http://localhost:5173/src/pages/order/create/form.tsx:34:43)...

我已经把错误范围缩小到下面这段代码里的useEffect了——只要doctor_id一被设置，这个错误就会触发。而且只有第一次选择医疗机构的时候会报错，之后再切换医疗机构就不会再弹这个错误了。

对应的代码片段：

// Watch the form value
const selectedPracticeId = form.watch("practice_id");

// Get doctors based on practice
const doctors = useGetDoctors(selectedPracticeId);

//Set defaults
useEffect(() => {
    if (doctors.data && doctors.data?.length === 1) {
        form.setValue("doctor_id", doctors.data[0].user_id);
      }
  }, [doctors.data]);

如果需要参考表单本身的代码，我也贴在这里：

<Form {...form}>
        <form
          onSubmit={form.handleSubmit(handleCreateOrder)}
          className="flex flex-col w-full gap-4"
        >
          {/* Top Row */}
          <div className="flex flex-wrap md:flex-nowrap gap-4">
            {/* Practice */}
            {practices.data && practices.data.length > 1 && (
              <FormField
                control={form.control}
                name="practice_id"
                rules={{
                  required: "Practice is required",
                  validate: (value) =>
                    practiceOptions?.some((option) => option.value === value) ||
                    "Selected practice is not valid",
                }}
                render={({ field }) => (
                  <FormItem className="w-full">
                    <FormLabel className="flex">Practice</FormLabel>
                    <FormControl>
                      <FormCombobox {...field} items={practiceOptions} />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
            )}
            {/* Doctor */}
            <FormField
              control={form.control}
              name="doctor_id"
              rules={{
                required: "Doctor is required",
                validate: (value) =>
                  doctorOptions?.some((option) => option.value === value) ||
                  "Selected doctor is not valid",
              }}
              disabled={!form.watch("practice_id")}
              render={({ field }) => (
                <FormItem className="w-full">
                  <FormLabel className="flex">Doctor</FormLabel>
                  <FormControl>
                    <FormCombobox {...field} items={doctorOptions} />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />

我试了好几种办法都没用：有人说用setTimeout，但这明显不是 timing 问题，加了之后完全没效果；换成用form.reset来设置doctor_id，结果和直接用setValue的问题一模一样。现在实在想不到别的办法了，有没有大佬能指点一下？

备注：内容来源于stack exchange，提问作者hego64