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

const QueryResolver: React.FC = ({
  inputType,
  schemas,
  submitHandler,
  enableAutocomplete = true,
}) => {
  const validation = useForm({
    mode: "onSubmit",
    reValidateMode: "onSubmit",
    shouldFocusError: false,
  });

  const [searchParams] = useSearchParams();
  const [queryData, setQueryData] = React.useState(searchParams.get("q") || "");

  let typeLabel = schemas.map(schema => schema?.metadata.displayName).join();
  typeLabel = `Search by ${typeLabel}`;

  const handleChanges = (event: React.ChangeEvent | React.KeyboardEvent) => {
    setQueryData(convertChangeEvent(event).target.value);
  };

  // If there is at least 1 schema that has the ability to autocomplete we will enable it.

export default function App() {
  const { register, errors, handleSubmit } = useForm();
  const onSubmit = data => {
    alert(JSON.stringify(data));
  };
  console.log(errors);

  return (
    <form>
      <div>
        <label>First name</label>
        <input name="First name" type="text">
      </div>
      <div></div></form>

export default function App() {
  const methods = useForm();
  const { register, handleSubmit } = methods;
  return (
    
      <form> console.log(data))}&gt;
        <label>Test</label>
        <input name="test">
        <label>Nested Input</label>
        
        <input type="submit">
      
    </form>
  );
}

export default function App() {
  const { register, handleSubmit, formState } = useForm({
    mode: 'onChange',
  });
  const onSubmit = data => {
    alert(JSON.stringify(data));
  };

  console.log(formState);

  return (
    <form>
      <div>
        <label>First name</label>
        <input name="First name" type="text">
      </div>
      <div>
        <label>Last name</label></div></form>

export default function App() {
  const { register, errors, triggerValidation } = useForm();

  console.log('errors', errors);

  return (
    <div>
      <h1>validationFeild</h1>
      <label>First name: </label>
      <input name="firstName">

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

      <button type="button"> {
          console.log(</button></div>

export default function App() {
  const { register, handleSubmit, errors } = useForm();
  const onSubmit = data => {
    alert(JSON.stringify(data));
  };
  const intialValues = {
    firstName: 'bill',
    lastName: 'luo',
    email: 'bluebill1049@hotmail.com',
    age: -1,
  };

  return (
    <div>
      <form>
        <div>
          <label>First Name</label>
          </div></form></div>

export default function App() {
  const { register, handleSubmit, errors } = useForm({
    validationSchema: SignupSchema,
  });
  const onSubmit = data => {
    alert(JSON.stringify(data));
  };

  return (
    <form>
      <div>
        <label>Develop?</label>
        Yes
        <input value="yes" name="test" type="radio">
        No
        <input value="no" name="test" type="radio">
      </div>
      <div></div></form>

export default function AddProvider({ modalState, closeModal }: any) {
  const { register, handleSubmit, watch, errors } = useForm();
  const [selectedProviderType, setSelectedProviderType] = useState(0);
  const toastr = new Toastr();

  

  function providerTypeSelected(providerType: number) {
    setSelectedProviderType(providerType);
  }

  const onSubmit = (data: any) => {
   
    var form_data = new FormData();

    for (var key in data) {
      form_data.append(key, data[key]);
    }

function WatchDefaultValues() {
  const { watch } = useForm({
    defaultValues: {
      test: 'test',
      test1: {
        firstName: 'firstName',
        lastName: ['lastName0', 'lastName1'],
        deep: {
          nest: 'nest',
        },
      },
      'flatName[1].whatever': 'flat',
    },
  });

  const all = watch();
  const array = watch(['test', 'flatName[1].whatever']);
  const singleObject = watch('test1.firstName');

function Reset() {
  const { register, reset } = useForm<{
    firstName: string;
    lastName: string;
    objectData: {
      test: string;
    };
    array: string[];
    deepNest: {
      level1: {
        level2: {
          data: string;
        };
      };
    };
  }>();
  return (
    <>