How to use the react-hook-form function in react-hook-form

function App() {
  const { register, errors, handleSubmit } = useForm({
    validationFields: ["lastName"] // will only validate lastName onSubmit
  });

  const onSubmit = data => {
    alert(JSON.stringify(data));
  };
  console.log("errors", errors);

  return (
    <form>
      <h1>validationFields</h1>
      <label>First name: </label>
      <input name="firstName">

      <label>Last name: </label>
      <input name="lastName"></form>

function Setting({ settingButton, toggleSetting, showSetting, setting, setConfig }) {
  const buttonRef = useRef(null);
  const { register, handleSubmit } = useForm();
  const onSubmit = data => {
    setConfig(data);
    toggleSetting(false);
    settingButton.current.focus();
  };
  const tabIndex = showSetting ? 0 : -1;

  if (showSetting && buttonRef.current) {
    // @ts-ignore
    buttonRef.current.focus();
  }

  return (

function Setting({ settingButton, toggleSetting, showSetting, setting, setConfig }) {
  const buttonRef = useRef(null);
  const { register, handleSubmit } = useForm()
  const onSubmit = data => {
    setConfig(data);
    toggleSetting(false);
    settingButton.current.focus();
  };
  const tabIndex = showSetting ? 0 : -1;

  if (showSetting && buttonRef.current) {
    // @ts-ignore
    buttonRef.current.focus();
  }

  return (

function ExampleBuilderBase(props) {

  const { register, handleSubmit, setValue, getValues, watch } = useForm({
    defaultValues: {
      request: {
        method: 'GET',
        url: '/'
      },
      response: {
        statusCode: 200
      }
    },
  });


  // need watch() to update getValues() on change
  const watchAll = watch();
  const formValues = getValues({ nest: true });

function Builder({
  formData,
  updateFormData,
  showBuilder,
  toggleBuilder,
  editFormData,
  setFormData,
  builderButton,
  HomeRef,
  isMobile,
}) {
  const { register, handleSubmit, errors = {}, watch } = useForm();
  const [editIndex, setEditIndex] = useState(-1);
  const copyFormData = useRef([]);
  const closeButton = useRef(null);
  const [showValidation, toggleValidation] = useState(false);
  const onSubmit = (data, event) => {
    if (editIndex >= 0) {
      formData[editIndex] = data;
      updateFormData([...formData]);
      setFormData({});
      setEditIndex(-1);
    } else {
      // @ts-ignore
      updateFormData([...formData, ...[data]]);
    }
    event.target.reset();
  };

showTouch: boolean;
    showSubmit: boolean;
  }>({
    mode: 'onChange',
    showError: true,
    showWatch: true,
    showTouch: true,
    showSubmit: true,
  });
  const {
    register,
    errors,
    handleSubmit,
    watch,
    formState: { touched },
  } = useForm({
    mode: setting.mode,
  });
  const tabIndex = showApi || showBuilder ? -1 : 0;

  const onSubmit = data => {
    updateSubmitData(data);
  };

  useEffect(() => {
    window.addEventListener('popstate', function() {
      const pathName = window.location.pathname;
      if (pathName === '/api') {
        toggleApi(true);
        toggleBuilder(false);
        document.body.style.overflow = 'hidden';
      } else if (pathName === '/builder') {

function SignUpPage(): ReactElement {
  const {
    register,
    errors,
    setValue,
    handleSubmit,
    formState: { touched },
    watch,
    reset,
  } = useForm({
    validationSchema: signUpValidationSchema,
  });
  const onTextChanged = useCallback(
    (label: keyof SignUpFormValues, text: string): void | Promise => {
      setValue(label, text, true);
    },
    [setValue],
  );
  const onSignUpSubmit = useCallback(
    ({ email, password, name, status }): void => {
      Alert.alert(
        'Signed Up',
        `You've signed up with 
        email: ${email},
        password: ${password},
        name: ${name},

function FindPw(): ReactElement {
  const {
    register,
    errors,
    setValue,
    handleSubmit,
    formState: { touched },
    watch,
    reset,
  } = useForm({
    validationSchema: schema,
  });
  const onSubmit = useCallback(({ email }) => {
    Alert.alert(
      'Find Password',
      `password reset link has been sent to your email: ${email}.`,
    );
    reset({ email: '' });
  }, []);
  const onTextChanged = useCallback((text: string): void | Promise => {
    setValue('email', text, true);
  }, []);
  const errorMessage = errors.email && errors.email.message;

  return (

export default function SchemaForm({
	customValidation,
	data,
	displayMode,
	onSubmit,
	onTrigger,
	widgets,
	...restProps
}) {
	const { properties } = data;
	const { mergedSchema } = useSchemaForm(data);
	const { handleSubmit, ...rhf } = useForm({ mode: 'onBlur', defaultValues: properties });

	const handleTrigger =
		onTrigger &&
		(({ schema, trigger }) =>
			onTrigger({
				errors: rhf.errors,
				properties: rhf.getValues({ nest: true }),
				schema,
				trigger,
			}));

	const contextValue = {
		customValidation,
		displayMode,
		onTrigger: handleTrigger,
		rhf,

currentLanguage,
}: {
  onSubmit: any
  submitData: Object
  toggleBuilder: (state: boolean) => void
  formUpdated: boolean
  currentLanguage: string
}) {
  const {
    register,
    errors,
    handleSubmit,
    watch,
    formState: { touched },
    reset,
  } = useForm({
    mode: "onChange",
  })
  const {
    state: { formData },
  } = useStateMachine()

  return (
    <>
      
        <h1>{home.liveDemo[currentLanguage].title}</h1>
        {formUpdated &amp;&amp; (