react-hook-formでdefaultValuesを非同期でセットする方法

追記（7/31）

コメントにて非同期でのdefaultValueセットやvalues propsが追加されたのことを教えていただきました
ありがとうございます！
https://github.com/react-hook-form/react-hook-form/pull/9261

react-hook-form でdefaultValuesに API レスポンスや状態管理ライブラリから非同期で渡される値を使いたい場合の tips です。

以下、recoil 使用時に直面したケースです。

BAD

コンポーネントのマウント時にはhogeIdは取得できていますが、recoil の仕様上hogeはhogeIdの取得を待つので一度デフォルト値が返ります。
また、そのデフォルト値が react-hook-form のdefaultValuesにセットされてしまい、想定した値がセットされません。

const hogeId = useRecoilValue(stateHogeId);
const hoge = useRecoilValue(stateHogeItem(hogeId));

const methods = useForm({
  defaultValues: {
    fuga: hoge.fuga,
  },
});

GOOD

hogeが取得できた後で react-hook-form のresetを呼ぶことでdefaultValuesに想定通りの値をセットできました。

const hogeId = useRecoilValue(stateHogeId);
const hoge = useRecoilValue(stateHogeItem(hogeId));

const defaultValues = useMemo(() => {
  return {
    fuga: hoge.fuga,
  };
}, [hoge]);

const methods = useForm({
  defaultValues,
});

useEffect(() => {
  methods.reset(defaultValues);
}, [defaultValues]);