title: TypeError: register is not a function using React Hook Form in React
body: <p>The Error Message:
  <img src="https://i.imgur.com/rCLSf05.png" alt="Error Message:" />
  If i dont use the Inputs inside div then it works perfectly but when i use Input inside div it shows me this error.<br />
  I wanted to keep the hook related stuff separated so it look clean.<br />
  why does it only works when its not inside a div?</p>
  <p>Login.tsx</p>
  <pre><code>import { useHistory } from &quot;react-router-dom&quot;;
  import { useForm } from &quot;react-hook-form&quot;;
  
  import useAuth from &quot;./../hooks/useAuth&quot;;
  import { Form, Input } from &quot;../components/FormGroup&quot;;
  import MacNav from &quot;../components/MacNav&quot;;
  
  import { loginActionUrl } from &quot;./../services/ApiLinks&quot;;
  import {
    fetchPostResopnse,
    successPopUp,
    errorPopUp,
  } from &quot;./../services/FormHelper&quot;;
  
  type Tinputs = {
    username: string;
    password: string;
  };
  
  function Login() {
    const auth = useAuth();
    const history = useHistory();
    const methods = useForm&lt;Tinputs&gt;();
  
    const onSubmit = async (data: Tinputs) =&gt; {
      const result = await fetchPostResopnse(loginActionUrl, data);
  
      if (result.isAuth) {
        successPopUp(&quot;Credentials Matched&quot;, () =&gt; {
          auth.signIn(result);
          history.push(&quot;/admin/dashboard&quot;);
        });
      } else {
        errorPopUp(&quot;Credentials Does Not Matched&quot;);
      }
    };
  
    return (
      &lt;div&gt;
        &lt;MacNav /&gt;
  
        &lt;div className=&quot;section-secondary&quot;&gt;
          &lt;div className=&quot;container&quot;&gt;
            &lt;div className=&quot;contact-form-wrapper&quot;&gt;
              &lt;div className=&quot;title-lg text-center&quot;&gt;Enter Your Credentials&lt;/div&gt;
              &lt;Form formMethods={methods} handler={onSubmit} submitBtn=&quot;Submit&quot;&gt;
               {/*If i dont use Input inside div it works*/}
                &lt;div&gt;
                  &lt;Input name=&quot;username&quot; rule={{ required: true }} /&gt;
                &lt;/div&gt;
                &lt;Input name=&quot;password&quot; rule={{ required: true }} /&gt;
              &lt;/Form&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  }
  
  export default Login;
  </code></pre>
  <p>I have wrote the form components here.
  FormGroup.tsx</p>
  <pre><code>import React from &quot;react&quot;;
  
  const Form = ({ children, formMethods, handler, submitBtn }: any) =&gt; {
    return (
      &lt;form onSubmit={formMethods.handleSubmit(handler)}&gt;
        {React.Children.map(children, (child) =&gt; {
          return child.props.name ? (
            &lt;div&gt;
              {React.createElement(child.type, {
                ...{
                  ...child.props,
                  register: formMethods.register,
                  key: child.props.name,
                },
              })}
              {child.props?.rule &amp;&amp; formMethods.errors[child.props.name] &amp;&amp; (
                &lt;div className=&quot;text-danger&quot;&gt;
                  *
                  {formMethods.errors[child.props.name].message
                    ? formMethods.errors[child.props.name].message
                    : `${child.props.name} is required`}
                &lt;/div&gt;
              )}
            &lt;/div&gt;
          ) : (
            child
          );
        })}
        {submitBtn &amp;&amp; &lt;button type=&quot;submit&quot;&gt;{submitBtn}&lt;/button&gt;}
      &lt;/form&gt;
    );
  };
  
  const Input = ({ register, name, label, rule, ...rest }: any) =&gt; {
    label = label ? label : name?.charAt(0).toUpperCase() + name?.slice(1);
    return (
      &lt;div&gt;
        &lt;label htmlFor={name}&gt;{label}&lt;/label&gt;
        &lt;input name={name} ref={register(rule)} {...rest} /&gt;
      &lt;/div&gt;
    );
  };
  
  const Textarea = ({ register, name, label, rule, ...rest }: any) =&gt; {
    label = label ? label : name?.charAt(0).toUpperCase() + name?.slice(1);
    return (
      &lt;div&gt;
        &lt;label htmlFor={name}&gt;{label}&lt;/label&gt;
        &lt;textarea name={name} ref={register(rule)} {...rest}&gt;&lt;/textarea&gt;
      &lt;/div&gt;
    );
  };
  
  const SubmitButton = ({ name, ...rest }: any) =&gt; {
    return (
      &lt;button type=&quot;submit&quot; {...rest}&gt;
        {name}
      &lt;/button&gt;
    );
  };
  
  export { Form, Input, Textarea, SubmitButton };
  
  
    [1]: https://i.stack.imgur.com/PvEUA.png
  </code></pre>