如何解決react-hook-form 無法指定defaultvalue問題？

如題，使用 Textfield 的 select 組件時，我們會想預先設定已選取的項目，但是我們指定了，畫面上的 input 卻還是沒有選起來的樣式。

原本使用的方式：

import { useForm } from "react-hook-form";

const {
    register,
  } = useForm({
    defaultValues: {
      authorId: 1,
    },
 });

<TextField
  label="作者"
  select
  {...register("authorId")}
  >
    //...options
</TextField>

這樣寫的情況下，畫面上不會顯示出已經有被選取的選項在 input 裡面，所以改成以下寫法：

import { useForm, Controller } from "react-hook-form";

const {
    control,
  } = useForm({
    defaultValues: {
      authorId: 1,
    },
 });

<Controller
  control={control}
  name="authorId"
  render={({ field }) => (
    <TextField
      label="作者"
      select
      {...field}
    >
      //...options
    </TextField>
  )}
/>