TextArea in Tabs component antd text not rendering : I am using antd with React and have the following code:


<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

    <Tabs  type="card">
      <TabPane tab="Summary" key="1">
        <TextArea name="Name" 
                  rows={4} 
                  style={{marginBottom: '10px'}} 
                  defaultValue={"DefaultValue"}/>     
        </TabPane>
        <TabPane tab="Description" key="2">
          <TextArea name="Name" 
                    rows={4} 
                    style={{marginBottom: '10px'}}           
                    defaultValue={"DefaultValue"}/>
        </TabPane>
    </Tabs>

<!-- language: lang-html -->

    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>


<!-- end snippet -->

In the defaultValue props I am rendering values from props. But only the second text area renders the value I send from props and the first TextArea remains blank. If I set value instead of defaultValue it works but I can't edit the text inside it. What is the problem?