title: I'm working on a react/ redux form that creates nested dynamic field objects
body: <p>I have a form and this is my code, If I have one action and status input field everything is ok, unless i add another by clicking the 'Add Action' button and try to type in it.</p>
  <pre><code>const handleActionChange = (e, index) =&gt; {
      const { name, value } = e.target;
      console.log(name,value)
  
      let actions = [...formData.actions];
      
      actions[index][name] = value;
      
      console.log(actions)
  
      setFormData({
        ...formData, 
        actions:[ ]
      })
    }
  
    const addAction = () =&gt;{
      setFormData({ ...formData, actions:[...formData.actions, {description: '',type:'', status: ''}] })
      // console.log(formData)
    }
  </code></pre>
  <p>and here is my form</p>
  <pre><code>{formData.actions.map((act, index)=&gt;{
    return (
      &lt;div key={index}&gt;
          &lt;TextField
             label=&quot;Action&quot;
             name=&quot;description&quot;
             value={act.description}
             onChange={(e) =&gt; handleActionChange(e, index)}
             margin=&quot;normal&quot;
             variant=&quot;outlined&quot;
             autoComplete=&quot;off&quot;
             fullWidth
          /&gt;
          &lt;TextField
             label=&quot;Status&quot;
             name=&quot;status&quot;
             value={act.status}
             onChange={(e) =&gt; handleActionChange(e, index)}
             margin=&quot;normal&quot;
             variant=&quot;outlined&quot;
             autoComplete=&quot;off&quot;
             fullWidth
          /&gt;
        &lt;/div&gt;  
    );  
  })}
      &lt;button onClick={addAction}&gt;Add Action&lt;/button&gt; 
  </code></pre>
  <p>This is the error i get
  <code>Uncaught TypeError: Cannot assign to read only property 'description' of object '#&lt;Object&gt;'</code></p>