title: react-hook-form returns register is not a function error
body: <p>So i'm having an issue with react-hook-form. I have two forms, they are built identically. One is working, another is returning error. I can't find a way to debug it correctly. When i'm commenting out ...register line from Child component, then it's fine. Otherwise i don't know what is happening because the second form i'm having is working without any issues and their wrapping inside div's are the same.</p>
  <pre><code>import { useRouter } from &quot;next/router&quot;;
  import Card from &quot;../../components/Card&quot;;
  import Form from &quot;../../components/Form/Form&quot;;
  import Input from &quot;../../components/Form/Input&quot;;
  import InputCard from &quot;../../components/Form/InputCard&quot;;
  import InputSelect from &quot;../../components/Form/InputSelect&quot;;
  import { useNotification } from &quot;../../context/errorContext&quot;;
  import { useForm } from &quot;react-hook-form&quot;;
  
  import axios from &quot;axios&quot;;
  
  const ClientAdd = () =&gt; {
    const {
      register,
      handleSubmit,
      watch,
      formState: { errors },
    } = useForm();
  
    const [isHomeless, setIsHomeless] = useState(false);
    const [personalIdAllowed, setPersonalIdAllowed] = useState(true);
  
    const defaultOptions = [
      { value: &quot;yes&quot;, text: &quot;Jah&quot; },
      { value: &quot;ei&quot;, text: &quot;Ei&quot; },
      { value: &quot;refuse&quot;, text: &quot;Keeldus&quot; },
    ];
  
    const defaultPrefilledOptions = [
      { value: &quot;prefilled&quot;, text: &quot;Eeltäidetud sihtrühma alusel&quot; },
      { value: &quot;asked&quot;, text: &quot;Küsitud osaleja käest&quot; },
    ];
  
    const { setNotifications, setNotificationVariant, clearNotifications } =
      useNotification();
  
    const router = useRouter();
  
    const submitForm = (e, data) =&gt; {
      e.preventDefault();
      console.log(&quot;submit&quot;, data);
  
      const headers = {
        Accept: &quot;application/json&quot;,
        &quot;Content-Type&quot;: &quot;application/x-www-form-urlencoded;charset=utf-8&quot;,
      };
  
      axios({
        method: &quot;post&quot;,
        url: &quot;http://localhost:80/api/clients&quot;,
        data: JSON.stringify(data),
        headers: headers,
      })
        .then((response) =&gt; {
          clearNotifications();
          console.log(&quot;Status: &quot;, response.status);
          console.log(&quot;Data: &quot;, response.data);
          router.push(&quot;/clients/&quot;);
        })
        .catch((error) =&gt; {
          console.error(&quot;Something went wrong!&quot;, error.response);
          clearNotifications();
          setNotifications(error.response.data.errors);
          setNotificationVariant(&quot;danger&quot;);
        });
    };
  
    return (
      &lt;div className=&quot;container py-10&quot;&gt;
        &lt;form onSubmit={handleSubmit(submitForm)}&gt;
          &lt;Card&gt;
            &lt;InputCard
              title=&quot;Isikuandmed&quot;
              description=&quot;Lisa isikuandmed abivajale&quot;
            &gt;
              &lt;div className=&quot;grid grid-cols-2 gap-4&quot;&gt;
                &lt;div&gt;
                  &lt;Input
                    label=&quot;Eesnimi&quot;
                    id=&quot;name&quot;
                    register={register}
                    required
                    error={errors}
                    errorMessage=&quot;Eesnimi on vajalik&quot;
                  /&gt;
                &lt;/div&gt;
                &lt;div&gt;
                  &lt;Input
                    label=&quot;Perekonnanimi&quot;
                    id=&quot;last_name&quot;
                    register={register}
                    required
                    error={errors}
                    errorMessage=&quot;Eesnimi on vajalik&quot;
                  /&gt;
                &lt;/div&gt;
                &lt;div&gt;
                  &lt;Input
                    label=&quot;Isikukood&quot;
                    id=&quot;personal_id&quot;
                    type=&quot;number&quot;
                    register={register}
                    required={!personalIdAllowed ? &quot;&quot; : true}
                    error={errors}
                    errorMessage=&quot;Eesnimi on vajalik&quot;
                  /&gt;
                  &lt;div className=&quot;mt-4&quot;&gt;
                    &lt;input
                      type=&quot;checkbox&quot;
                      name=&quot;allowPersonalId&quot;
                      className=&quot;form-checkbox&quot;
                      onChange={() =&gt; setPersonalIdAllowed(!personalIdAllowed)}
                    /&gt;
                    &lt;label htmlFor=&quot;allowPersonalId&quot;&gt;
                      Ei soovi isikukoodi avaldada
                    &lt;/label&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;div&gt;
                  &lt;InputSelect
                    label=&quot;Sugu&quot;
                    options={[
                      { value: &quot;m&quot;, text: &quot;Mees&quot; },
                      { value: &quot;n&quot;, text: &quot;Naine&quot; },
                    ]}
                    id=&quot;sex&quot;
                    register={register}
                    required
                    error={errors}
                    errorMessage=&quot;Eesnimi on vajalik&quot;
                  /&gt;
                &lt;/div&gt;
                {!personalIdAllowed &amp;&amp; (
                  &lt;div className=&quot;col-span-2&quot;&gt;
                    &lt;Input
                      label=&quot;Sünnikuupäev&quot;
                      type=&quot;date&quot;
                      id=&quot;date_of_birth&quot;
                      register={register}
                      required
                      error={errors}
                      errorMessage=&quot;Eesnimi on vajalik&quot;
                    /&gt;
                  &lt;/div&gt;
                )}
                &lt;div&gt;
                  &lt;Input label=&quot;Vanus&quot; type=&quot;number&quot; disabled /&gt;
                &lt;/div&gt;
                &lt;div&gt;
                  &lt;Input
                    label=&quot;Telefon&quot;
                    type=&quot;tel&quot;
                    id=&quot;telephone&quot;
                    register={register}
                    required
                    error={errors}
                    errorMessage=&quot;Eesnimi on vajalik&quot;
                  /&gt;
                &lt;/div&gt;
                &lt;div&gt;
                  &lt;Input
                    label=&quot;E-posti aadress&quot;
                    type=&quot;email&quot;
                    id=&quot;email&quot;
                    register={register}
                    required
                    error={errors}
                    errorMessage=&quot;Eesnimi on vajalik&quot;
                  /&gt;
                &lt;/div&gt;
                &lt;div&gt;
                  &lt;InputSelect
                    label=&quot;Kohalik omavalitsus&quot;
                    options={[
                      { value: 0, text: &quot;Hiiu vald&quot; },
                      { value: 1, text: &quot;Saare&quot; },
                      { value: 2, text: &quot;Muu&quot; },
                      { value: 3, text: &quot;Saku vald&quot; },
                    ]}
                    id=&quot;local_government&quot;
                    register={register}
                    required
                    error={errors}
                    errorMessage=&quot;Eesnimi on vajalik&quot;
                  /&gt;
                &lt;/div&gt;
                &lt;div&gt;
                  &lt;InputSelect
                    label=&quot;Maakond&quot;
                    options={[
                      { value: 0, text: &quot;Hiiumaa&quot; },
                      { value: 1, text: &quot;Saaremaa&quot; },
                      { value: 2, text: &quot;Pärnumaa&quot; },
                      { value: 3, text: &quot;Saku vald&quot; },
                    ]}
                    id=&quot;county&quot;
                    register={register}
                    required
                    error={errors}
                    errorMessage=&quot;Eesnimi on vajalik&quot;
                  /&gt;
                &lt;/div&gt;
                &lt;div className=&quot;flex items-center&quot;&gt;
                  &lt;input
                    className=&quot;mr-2 form-checkbox&quot;
                    type=&quot;checkbox&quot;
                    onChange={() =&gt; setIsHomeless(!isHomeless)}
                  /&gt;
                  &lt;label&gt;Klient on kodutu&lt;/label&gt;
                &lt;/div&gt;
                &lt;div&gt;&lt;/div&gt;
                {isHomeless &amp;&amp; (
                  &lt;div className=&quot;col-span-2&quot;&gt;
                    &lt;Input
                      label=&quot;Elukoht&quot;
                      id=&quot;address&quot;
                      register={register}
                      required
                      error={errors}
                      errorMessage=&quot;Eesnimi on vajalik&quot;
                    /&gt;
                  &lt;/div&gt;
                )}
                &lt;div&gt;
                  &lt;InputSelect
                    label=&quot;Kõrgeim omandatud haridustase&quot;
                    options={[
                      { value: 0, text: &quot;Algharidus puudub&quot; },
                      { value: 1, text: &quot;Alg- või põhiharidus&quot; },
                      { value: 2, text: &quot;Üld- või kutseharidus&quot; },
                      { value: 3, text: &quot;Kõrgharidus&quot; },
                    ]}
                    id=&quot;education_level&quot;
                    register={register}
                    required
                    error={errors}
                    errorMessage=&quot;Eesnimi on vajalik&quot;
                  /&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/InputCard&gt;
          &lt;/Card&gt;
          {!personalIdAllowed &amp;&amp; (
            &lt;&gt;
              &lt;hr className=&quot;py-5&quot; /&gt;
              &lt;Card&gt;
                &lt;InputCard title=&quot;Ebasoodsas olukorras olevad osalejad&quot;&gt;
                  &lt;div&gt;
                    &lt;InputSelect
                      label=&quot;Tegevuses osaleja – elab koos mittetöötavate leibkonnaliikmetega&quot;
                      options={defaultOptions}
                      inline
                      id=&quot;is_living_with_unemployed&quot;
                      register={register}
                      required
                      error={errors}
                      errorMessage=&quot;Eesnimi on vajalik&quot;
                    /&gt;
                  &lt;/div&gt;
                  &lt;div&gt;
                    &lt;InputSelect
                      label=&quot;Tegevuses osaleja – elab koos ülalpeetavate laste ja mittetöötavate leibkonnaliikmetega&quot;
                      id=&quot;is_living_with_unemployed_and_children&quot;
                      options={defaultOptions}
                      inline
                      register={register}
                      required
                      error={errors}
                      errorMessage=&quot;Eesnimi on vajalik&quot;
                    &gt;&lt;/InputSelect&gt;
                  &lt;/div&gt;
                  &lt;div&gt;
                    &lt;InputSelect
                      label=&quot;Tegevuses osaleja – elab ülalpeetavate laste ja ühe täiskasvanuga leibkonnas&quot;
                      id=&quot;is_living_with_adult_and_children&quot;
                      options={defaultOptions}
                      inline
                      register={register}
                      required
                      error={errors}
                      errorMessage=&quot;Eesnimi on vajalik&quot;
                    &gt;&lt;/InputSelect&gt;
                  &lt;/div&gt;
                  &lt;div&gt;
                    &lt;InputSelect
                      label=&quot;Tegevuses osaleja – sisserändaja, teise riigi taustaga või rahvusvähemusse kuuluv&quot;
                      id=&quot;is_immigrant_or_minority&quot;
                      options={defaultOptions}
                      inline
                      register={register}
                      required
                      error={errors}
                      errorMessage=&quot;Eesnimi on vajalik&quot;
                    &gt;&lt;/InputSelect&gt;
                  &lt;/div&gt;
                  &lt;div&gt;
                    &lt;InputSelect
                      label=&quot;Tegevuses osaleja – puue määratud&quot;
                      id=&quot;is_disabled&quot;
                      options={defaultOptions}
                      inline
                      register={register}
                      required
                      error={errors}
                      errorMessage=&quot;Eesnimi on vajalik&quot;
                    &gt;&lt;/InputSelect&gt;
                  &lt;/div&gt;
                  &lt;div&gt;
                    &lt;InputSelect
                      label=&quot;Tegevuses osaleja – muu ebasoodne olukord&quot;
                      id=&quot;other_unfavorable_condition&quot;
                      options={defaultOptions}
                      inline
                      register={register}
                      required
                      error={errors}
                      errorMessage=&quot;Eesnimi on vajalik&quot;
                    &gt;&lt;/InputSelect&gt;
                  &lt;/div&gt;
                &lt;/InputCard&gt;
              &lt;/Card&gt;
            &lt;/&gt;
          )}
  
          &lt;hr className=&quot;py-5&quot; /&gt;
          &lt;Card&gt;
            &lt;InputCard title=&quot;Tegevustega seotud andmed&quot;&gt;
              &lt;div className=&quot;grid grid-cols-2 gap-4&quot;&gt;
                &lt;div&gt;
                  &lt;Input
                    type=&quot;date&quot;
                    label=&quot;Tegevuse alustamise kuupäev&quot;
                    id=&quot;beginning_of_activities&quot;
                    register={register}
                    required
                    error={errors}
                    errorMessage=&quot;Eesnimi on vajalik&quot;
                  /&gt;
                &lt;/div&gt;
                &lt;div&gt;
                  &lt;Input
                    type=&quot;date&quot;
                    label=&quot;Tegevuse lõpetamise kuupäev, sh katkestamise&quot;
                    id=&quot;end_of_activities&quot;
                    register={register}
                    required
                    error={errors}
                    errorMessage=&quot;Eesnimi on vajalik&quot;
                  /&gt;
                &lt;/div&gt;
                &lt;div&gt;
                  {/* &lt;Input label=&quot;Tegevuse katkestaja&quot; /&gt; */}
                  &lt;p&gt;Tegevuse katkestaja&lt;/p&gt;
                  &lt;div&gt;
                    &lt;InputSelect
                      label=&quot;Tegevuses osaleja – muu ebasoodne olukord&quot;
                      id=&quot;end_of_activities_initiator&quot;
                      options={defaultOptions}
                      inline
                      register={register}
                      required
                      error={errors}
                      errorMessage=&quot;Eesnimi on vajalik&quot;
                    &gt;&lt;/InputSelect&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/InputCard&gt;
          &lt;/Card&gt;
          &lt;hr className=&quot;py-5&quot; /&gt;
          &lt;Card&gt;
            &lt;InputCard title=&quot;Õppimine ja osalemine kursustel tegevusega liitumisel&quot;&gt;
              &lt;div className=&quot;&quot;&gt;
                &lt;InputSelect
                  label=&quot;Õppimine ja osalemine kursustel tegevusega liitumisel&quot;
                  id=&quot;is_taking_courses_when_joining&quot;
                  inline
                  options={defaultOptions}
                  register={register}
                  required
                  error={errors}
                  errorMessage=&quot;Eesnimi on vajalik&quot;
                /&gt;
              &lt;/div&gt;
              &lt;div className=&quot;&quot;&gt;
                &lt;InputSelect
                  label=&quot;Õppimine ja osalemine kursustel tegevusega liitumisel: eeltäidetud sihtrühma alusel või küsitud&quot;
                  id=&quot;is_taking_courses_when_joining_prefilled&quot;
                  inline
                  options={defaultPrefilledOptions}
                  register={register}
                  required
                  error={errors}
                  errorMessage=&quot;Eesnimi on vajalik&quot;
                /&gt;
              &lt;/div&gt;
            &lt;/InputCard&gt;
          &lt;/Card&gt;
          &lt;hr className=&quot;py-5&quot; /&gt;
          &lt;Card&gt;
            &lt;InputCard title=&quot;Tööhõive staatus tegevusega liitumisel&quot;&gt;
              &lt;div&gt;
                &lt;InputSelect
                  label=&quot;Tööhõive staatus tegevusega liitumisel&quot;
                  id=&quot;is_working&quot;
                  inline
                  options={[
                    { value: null, text: null },
                    { value: &quot;working&quot;, text: &quot;Töötav, sh FIE&quot; },
                    {
                      value: &quot;unemployed_short_term&quot;,
                      text: &quot;Töötu (kuni 12 kuud)&quot;,
                    },
                    {
                      value: &quot;unemployed_long_term&quot;,
                      text: &quot;Pikaajaline töötu (üle 12 kuu)&quot;,
                    },
                    { value: &quot;not_active&quot;, text: &quot;Mitteaktiivne&quot; },
                    { value: &quot;refused&quot;, text: &quot;Keeldumine&quot; },
                  ]}
                  register={register}
                  required
                  error={errors}
                  errorMessage=&quot;Eesnimi on vajalik&quot;
                /&gt;
              &lt;/div&gt;
              &lt;div&gt;
                &lt;InputSelect
                  label=&quot;Tööhõive staatus tegevusega liitumisel: eeltäidetud sihtrühma alusel või küsitud&quot;
                  id=&quot;is_working_prefilled&quot;
                  inline
                  options={defaultPrefilledOptions}
                  register={register}
                  required
                  error={errors}
                  errorMessage=&quot;Eesnimi on vajalik&quot;
                /&gt;
              &lt;/div&gt;
            &lt;/InputCard&gt;
          &lt;/Card&gt;
  
          &lt;hr className=&quot;py-5&quot; /&gt;
          &lt;Card&gt;
            &lt;InputCard title=&quot;Kliendi nõusolek ja sobivus&quot;&gt;
              &lt;div className=&quot;grid grid-cols-1 gap-4&quot;&gt;
                &lt;div&gt;
                  &lt;Input
                    label=&quot;Kliendi sobivuse põhjendus&quot;
                    id=&quot;acceptance_description&quot;
                    register={register}
                    required
                    error={errors}
                    errorMessage=&quot;Eesnimi on vajalik&quot;
                  /&gt;
                &lt;/div&gt;
                &lt;div&gt;
                  &lt;Input
                    label=&quot;Klient viibib hoolekandeasutuses&quot;
                    id=&quot;is_in_care_institution&quot;
                    register={register}
                    required
                    error={errors}
                    errorMessage=&quot;Eesnimi on vajalik&quot;
                  /&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/InputCard&gt;
          &lt;/Card&gt;
          &lt;div className=&quot;flex justify-center py-5 space-x-4&quot;&gt;
            &lt;button className=&quot;bg-green-400 py-4 px-6&quot; type=&quot;submit&quot;&gt;
              Salvesta
            &lt;/button&gt;
            &lt;button
              className=&quot;bg-red-400 py-4 px-6&quot;
              onClick={() =&gt; router.push(&quot;/dashboard&quot;)}
            &gt;
              Katkesta
            &lt;/button&gt;
          &lt;/div&gt;
        &lt;/form&gt;
      &lt;/div&gt;
    );
  };
  
  export default ClientAdd;
  </code></pre>
  <p>Is not working</p>
  <p>Child component code:</p>
  <pre><code>  label,
    id,
    type = &quot;text&quot;,
    half = true,
    disabled,
    register,
    required,
    error,
    errorMessage,
  }) =&gt; {
    return (
      &lt;&gt;
        &lt;label
          htmlFor={id}
          className={`block text-sm font-medium text-gray-700 ${
            disabled &amp;&amp; &quot;opacity-50&quot;
          }`}
        &gt;
          {label}
        &lt;/label&gt;
        &lt;input
          type={type}
          name={id}
          id={id}
          autoComplete=&quot;given-name&quot;
          disabled={disabled}
          {...register(id, { required, message: errorMessage })}
          className={`mt-1 ${
            error ?? &quot;ring-red-500&quot;
          } focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md ${
            half &amp;&amp; &quot;w-1/2&quot;
          }`}
        /&gt;
      &lt;/&gt;
    );
  };
  
  export default Input;
  </code></pre>
  <p>And error
  <a href="https://i.stack.imgur.com/UmhV5.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UmhV5.jpg" alt="enter image description here" /></a></p>
  <p>There is other form which is built the same and is working perfectly</p>