Controller

function App() {
  const { control } = useForm<FormValues>({
    defaultValues: {
      test: ""
    }
  });

  return (
    <form>
      <Controller
        control={control}
        name="test"
        render={({ field: { onChange, onBlur, value, ref }, formState, fieldState }) => (
          <>
            <input
              onChange={onChange} // send value to hook form
              onBlur={onBlur} // notify when input is touched
              value={value} // return updated value
              ref={ref} // set ref for focus management
            />
            <p>{formState.isSubmitted ? "submitted" : ""}</p>
            <p>{fieldState.isTouched ? "touched" : ""}</p>
          </>
        )}
      />
    </form>
  );
}