title: Unable to clear range picker after date is selected in ant design
body: <p>Unable to clear date range picker from ant design after user selects date.</p>
  
  <p>This is my code:</p>
  
  <pre><code>import React, { useState } from "react";
  import { DatePicker } from "antd";
  import moment from "moment";
  
  const { RangePicker } = DatePicker;
  import "antd/dist/antd.css";
  
  const DataTable = props =&gt; {
    const [dateRange, changeDateRange] = useState(null);
  
    const onDateRangeChange = dateRange =&gt; {
      if (dateRange) {
        changeDateRange(returnMomentDateRange(dateRange[0], dateRange[1]));
      }
    };
  
    const returnMomentDateRange = (start, finish) =&gt; {
      return [moment(start, "YYYY-MM-DD"), moment(finish, "YYYY-MM-DD")];
    };
  
    return (
      &lt;RangePicker
        allowClear={true}
        size="small"
        picker="date"
        value={dateRange !== "" ? dateRange : ""}
        onChange={onDateRangeChange}
      /&gt;
    );
  };
  
  export default DataTable;
  </code></pre>
  
  <p>It seems that once I add a value prop, I can no longer clear using the 'x'.</p>
  
  <p>This is a codesandbox I setup.</p>
  
  <p><a href="https://codesandbox.io/s/wispy-rgb-xidbz?file=/src/App.js:0-754" rel="nofollow noreferrer">https://codesandbox.io/s/wispy-rgb-xidbz?file=/src/App.js:0-754</a></p>