title: Antd Form with React hook form
body: <p>I am trying to use antd form with react-hook-form but couldn't get it to work.</p>
  <p>Basically I am using a theme with antd and want to integrate react-hook-form for better validation and other things. So far this is the code</p>
  <pre><code>import { Button, Form, Input, Message, Row, Tooltip } from &quot;antd&quot;;
  import { useForm, Controller } from &quot;react-hook-form&quot;;
  import {
    EyeTwoTone,
    MailTwoTone,
    PlaySquareTwoTone,
    QuestionCircleTwoTone,
    SkinTwoTone,
  } from &quot;@ant-design/icons&quot;;
  import Link from &quot;next/link&quot;;
  import Router from &quot;next/router&quot;;
  import styled from &quot;styled-components&quot;;
  
  const FormItem = Form.Item;
  
  const Content = styled.div`
    max-width: 400px;
    z-index: 2;
    min-width: 300px;
  `;
  
  const Register = (props) =&gt; {
    const defaultValues = {
      name: null,
      phone: null,
      email: null,
      password: null,
      confirmPassword: null,
      checked: false,
    };
  
    const { handleSubmit, reset, watch, control, errors, getValues } = useForm({
      defaultValues,
    });
    // const { register, errors, handleSubmit, control } = useForm({
    //    mode: 'onChange',
    // });
  
    const onSubmit = async (data) =&gt; {
      try {
        console.log(&quot;data&quot;, data);
      } catch (err) {
        console.log(&quot;err&quot;, err);
      }
    };
  
    return (
      &lt;Row
        type=&quot;flex&quot;
        align=&quot;middle&quot;
        justify=&quot;center&quot;
        className=&quot;px-3 bg-white&quot;
        style={{ minHeight: &quot;100vh&quot; }}
      &gt;
        &lt;Content&gt;
          &lt;div className=&quot;text-center mb-5&quot;&gt;
            &lt;Link href=&quot;/signup&quot;&gt;
              &lt;a className=&quot;brand mr-0&quot;&gt;
                &lt;PlaySquareTwoTone style={{ fontSize: &quot;32px&quot; }} /&gt;
              &lt;/a&gt;
            &lt;/Link&gt;
            &lt;h5 className=&quot;mb-0 mt-3&quot;&gt;Sign up&lt;/h5&gt;
  
            &lt;p className=&quot;text-muted&quot;&gt;create a new account&lt;/p&gt;
          &lt;/div&gt;
          &lt;Form layout=&quot;vertical&quot; onSubmit={handleSubmit(onSubmit)}&gt;
            &lt;Controller
              as={
                &lt;FormItem
                  label=&quot;Email&quot;
                  name=&quot;email&quot;
                  rules={[
                    {
                      type: &quot;email&quot;,
                      message: &quot;The input is not valid E-mail!&quot;,
                    },
                    {
                      required: true,
                      message: &quot;Please input your E-mail!&quot;,
                    },
                  ]}
                &gt;
                  &lt;Input
                    prefix={&lt;MailTwoTone style={{ fontSize: &quot;16px&quot; }} /&gt;}
                    type=&quot;email&quot;
                    placeholder=&quot;Email&quot;
                  /&gt;
                &lt;/FormItem&gt;
              }
              control={control}
              name=&quot;select&quot;
            /&gt;
  
            {/* &lt;Input inputRef={register} name=&quot;input&quot; /&gt; */}
  
            &lt;button type=&quot;button&quot; onClick={() =&gt; reset({ defaultValues })}&gt;
              Reset
            &lt;/button&gt;
            &lt;input type=&quot;submit&quot; /&gt;
          &lt;/Form&gt;
        &lt;/Content&gt;
      &lt;/Row&gt;
    );
  };
  
  export default Register;
  </code></pre>
  <p>Now, as you can see I am having regular form tag and inside that the input field. But using the regular form, I am not getting the layout props provided by the antd forms. Also I am not able to get the values during submit.</p>
  <p>So my question is that how can I use AntD form component with react hook form so i can use the benefits of react-hook0form as well a Antd styling.</p>