Here's my simplified problem:

https://codesandbox.io/s/busy-fire-mm91r?file=/src/FormWrapper.tsx

And the code:

export const FormItemWrapper = ({ children }) => {
  return <FormItem>{children}</FormItem>;
};

export const FormWrapper = ({ children }) => {
  const { handleSubmit } = useForm();
  const onSubmit = (data) => {
    console.log(data); // logs { }
  };
  return <Form onFinish={handleSubmit(onSubmit)}>{children}</Form>;
};

export default function App() {
  const { control, watch } = useForm();
  console.log(watch()); // logs { }
  return (
    <FormWrapper>
      <FormItemWrapper>
        <Controller
          control={control}
          name="tmp"
          render={({ field }) => <Input {...field} />}
        />
      </FormItemWrapper>
      <FormItemWrapper>
        <Button htmlType="submit">Save</Button>
      </FormItemWrapper>
    </FormWrapper>
  );
}

The problem:

React-hook-form doesn't seem to see the data I type in. I can get it using antd, but can't with react-hook-form. Why? What am I missing?

watch() logs only once, and it logs { }. onSubmit logs { }