title: Set default value in DatePicker Antd with React-Hook-Form V7
body: <p>I'm trying to <strong>set the default value</strong> for <code>Datepicker</code> when fetching data from a server, but it didn't work. Followed the docs <a href="https://ant.design/docs/react/faq-cn#%E5%BD%93%E6%88%91%E5%8A%A8%E6%80%81%E6%94%B9%E5%8F%98-defaultValue-%E7%9A%84%E6%97%B6%E5%80%99%E5%AE%83%E5%B9%B6%E6%B2%A1%E6%9C%89%E7%94%9F%E6%95%88%E3%80%82" rel="nofollow noreferrer">in here</a>, I cannot set the <code>defaultValue</code> props because it is only used for first rendering.</p>
  <p>I figure out a solution is creating a state and update that state when <code>Datepicker</code> change. But it seems stupid because it re-render each updating. Please let me know a &quot;better solution&quot; or using the &quot;state&quot; of react-hook-form value. Here is my current &quot;stupid solution&quot;:</p>
  <pre><code>import { DatePicker, Form } from &quot;antd&quot;;
  import moment, { Moment } from &quot;moment&quot;;
  import { useEffect, useState } from &quot;react&quot;;
  import {
    Controller,
    ControllerRenderProps,
    SubmitHandler,
    useForm,
  } from &quot;react-hook-form&quot;;
  
  const UserList = () =&gt; {
    const [date, setDate] = useState&lt;Moment | null&gt;();
    const dateFormat = &quot;YYYY-MM-DD&quot;;
    useEffect(() =&gt; {
      setDate(() =&gt; moment(&quot;1963-10-14T00:00:00&quot;));
    }, []);
  
    const onChange = (date: Moment | null, dateString: string) =&gt; {
      console.log(date, dateString);
    };
  
    interface IForm {
      dob: string;
    }
  
    const {
      handleSubmit,
      formState: { errors },
      control,
      reset,
      getValues,
      watch,
    } = useForm&lt;IForm&gt;({
      // resolver: yupResolver(UserInfoSchema),
    });
  
    const dateWatch = watch(&quot;dob&quot;);
  
    const handleSubmitForm: SubmitHandler&lt;IForm&gt; = (data: IForm) =&gt; {
      console.log(data);
    };
  
    const onDatePickerChange = (
      date: moment.Moment | null,
      dateString: string,
      props: any
    ) =&gt; {
      console.log(dateWatch);
      setDate(date);
      props.field.onChange(dateString);
    };
  
    return (
      &lt;&gt;
        &lt;Form onFinish={handleSubmit(handleSubmitForm)}&gt;
          &lt;Form.Item label={&quot;label&quot;}&gt;
            &lt;Controller
              control={control}
              name={&quot;dob&quot;}
              render={(props) =&gt; (
                &lt;DatePicker
                  onChange={(date, dateString) =&gt;
                    onDatePickerChange(date, dateString, props)
                  }
                  value={date}                    
                /&gt;
              )}
            /&gt;
          &lt;/Form.Item&gt;
        &lt;/Form&gt;
      &lt;/&gt;
    );
  };
  
  export default UserList;
  </code></pre>