title: form add more button, dynamic insert object values react 17.0.1
body: <p>I have a form which has add more row and delete the row, this feature is working perfect
  but i am stuck with values inside it.</p>
  <p>Here is my state</p>
  <pre><code>const [row, setRow] = useState([{ scheduleNumber: &quot;&quot;, quantity: &quot;&quot;, payableTo: &quot;&quot;, remarks: &quot;&quot;, costJson: {} }]);
  </code></pre>
  <p>In the above object all the values are stored except <strong>scheduleNumber</strong> and <strong>costJson</strong>, I am stuck here</p>
  <p>Here is the add more button onclick triggered</p>
  <pre><code>const handleaddmoreSchedules = () =&gt; {
      setRow([...row, { scheduleNumber: &quot;&quot;, quantity: &quot;&quot;, payableTo: &quot;&quot;, remarks: &quot;&quot;, costJson: {} }]);
  }
  </code></pre>
  <p>Here is my delete row</p>
  <pre><code>const handleDeleteSchedule = index =&gt; {
      const list = [...row];
      list.splice(index, 1);
      setRow(list);
  }
  </code></pre>
  <p>onchange function</p>
  <pre><code>const handleInputChange = (e, index) =&gt; {
      const { name, value } = e.target;
      const list = [...row, ...schuduleNumber];
      list[index][name] = value;
      setRow(list);
      console.log(row) //**this shows all except scheduleNumber and CostJson
  };
  </code></pre>
  <p>Here is my Form</p>
  <pre><code>{row.map((x,i) =&gt; {
      return(
          &lt;Form.Control as=&quot;select&quot; value={x.scheduleNumber} name=&quot;scheduleNo&quot; onChange={setSelectedScheduleNumber} &gt;
          &lt;Form.Control type=&quot;text&quot; name=&quot;payableTo&quot; value={x.payableTo} onChange={e =&gt; handleInputChange(e, i)} &gt;
          &lt;Form.Control as=&quot;textarea&quot; rows={3} name=&quot;remarks&quot; value={x.remarks} onChange={e =&gt; handleInputChange(e, i)} &gt;
          &lt;Form.Control type=&quot;text&quot; name=&quot;payableTo&quot; value={x.payableTo} onChange={e =&gt; handleInputChange(e, i)} &gt;
          
          {costs?.map((cost) =&gt; {
              return (
                  &lt;Form.Control
                      type=&quot;number&quot;
                      name={cost.key}
                      min=&quot;1&quot;
                      max={cost.value}
                      onChange={handleCostInput}
                  /&gt;
  ... other end tags
  </code></pre>
  <p>there is an differenct onchange function for <strong>scheduleNumber</strong> and <strong>costJson</strong></p>
  <p>How do i combine all together ?</p>