title: Antd form initial value not updating after state change
body: <p>I have a table showing school name and its fee or rates. There is button in table which opens a drawer containing this component or form.There is a button in table which toggles the state of drawer. As long as i am  only reading values in the form by clicking on the button my initalValue updates. But if i update price and submit form for any 1 entry , then initial value my price or school doesn't change for other entries or schools. While my state is changing accordingly which I did check by rendering state. But my initialValue of form doesn't updating accordingly</p>
  <pre><code>
  import React, { useState, useEffect } from 'react'
  import { Table, Button, Popconfirm, Drawer, Form, Input, Select, notification } from 'antd'
  
  const { Option } = Select
  
  const layout = {
    labelCol: {
      span: 10,
    },
    wrapperCol: {
      span: 10,
    },
  }
  const tailLayout = {
    wrapperCol: {
      offset: 7,
      span: 14,
    },
  }
  
  
  function SchoolRates({ form, relevantData }) {
    const [rates, setRates] = useState(null)
  
    useEffect(() =&gt; {
     setRates(relevantData)
  }, [someCondition])
  
    const updateRates = e =&gt; {
      e.preventDefault()
      form.validateFields((error, values) =&gt; {
        console.log(error, values, 'forms')
      })
      return 'Data Updated'
    }
  
    return (
      &lt;&gt;
        &lt;div&gt;
          {`${rates?.schoolName}, ${rates?.Price}`}
        &lt;/div&gt;
        &lt;Form {...layout} initialValue={rates} onSubmit={e =&gt; updateRates(e)}&gt;
          &lt;Form.Item label=&quot;Country&quot; style={{ marginBottom: '5px' }} size=&quot;small&quot;&gt;
            {form.getFieldDecorator('schoolName', {
              initialValue: rates?.schoolname,
              rules: [{ required: true, message: 'Please select a school!' }],
            })(
              &lt;Select
                placeholder=&quot;School&quot;
                allowClear
                size=&quot;small&quot;
                style={{ borderRadius: 0 }}
              &gt;
                {schoolList.map(item =&gt; (
                  &lt;Option value={item}&gt;{item}&lt;/Option&gt;
                ))}
              &lt;/Select&gt;,
            )}
          &lt;/Form.Item&gt;
          &lt;Form.Item label=&quot;Price / Learner&quot; style={{ marginBottom: '5px' }} size=&quot;small&quot;&gt;
            {form.getFieldDecorator('price', {
              initialValue: rates?.price,
              rules: [{ required: true, message: 'Please enter price/learner' }],
            })(
              &lt;Input
                size=&quot;small&quot;
                type=&quot;number&quot;
                style={{ borderRadius: 0 }}
              /&gt;,
            )}
          &lt;/Form.Item&gt;
          &lt;Form.Item {...tailLayout}&gt;
            &lt;Button type=&quot;primary&quot; htmlType=&quot;submit&quot; size=&quot;small&quot;&gt;
              Save
            &lt;/Button&gt;
          &lt;/Form.Item&gt;
        &lt;/Form&gt;
      &lt;/&gt;
    )
  }
  
  export default Form.create()(UpdateRates)
  
  </code></pre>
  <p>I just want to re render the complete form to update data as soon as I click on other school from my table</p>