title: Creating dynamic form ,Its values change across all the copy fields
body: <pre><code>  const [formSectionData, setFormSectionData] = useState([
      {id: 1, text: ''},
      {id: 2, text: ''},
     ]);
  
    const addSection = section =&gt; {
      let existingForm = [...formSectionData];
      existingForm.push(section);
      setFormSectionData(existingForm);
    };
  
    const onTextChange = (text, index) =&gt; {
      let existingForm = [...formSectionData];
      existingForm[index].text = text;
      setFormSectionData(existingForm);
     };
  
    return (
      &lt;SafeAreaView&gt;
        {formSectionData.map((item, index) =&gt; {
          return (
            &lt;View style={{padding: 15}} key={index}&gt;
              &lt;TouchableOpacity onPress={() =&gt; addSection(item)}&gt;
                &lt;Text&gt;+ Add Section&lt;/Text&gt;
              &lt;/TouchableOpacity&gt;
          &lt;TextInput
            key={index}
            placeholder={'Enter value' + index}
            value={item.text}
            onChangeText={text =&gt; onTextChange(text, index)}
          /&gt;
        &lt;/View&gt;
      );
    })}
  &lt;/SafeAreaView&gt;);
  </code></pre>
  <p>I'm trying to create a new input field using addsection, But now when I'm enter a value to the input field same value will appear in app its original input fields, How to properly add a new  input field from the existing json<a href="https://i.stack.imgur.com/YggEC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YggEC.png" alt="enter image description here" /></a>
  <a href="https://codesandbox.io/s/react-dynamic-form-fields-forked-5lu4v?fontsize=14&amp;hidenavigation=1&amp;theme=dark" rel="nofollow noreferrer">Code sample</a></p>