How to bind values to dynamic controls in react

I am loading form controls dynamically by making 2 api calls. First api to get form control's list and second api to get data for the controls loaded previously. First half works fine and i am able to load controls dynamically,

schema:

[{ id: 1, input: 'TextBox'},
 { id: 2, input: 'TextArea'}]

code:

fields.map((type: any, i: any) => {
  switch (type.input) {
   case 'TextBox':
   return (<input type="text" id={type.id}> />)
   case 'TextArea':
   return (<textarea itemType="text" id={type.id}> />)}});

Above code works fine and I am able to create form controls.

Next part is binding value to the dynamic controls, I make another API call to get data and I should map id field and bind data

schema:

[{ id: 1, value: 'testTextBox'},
 { id: 2, value: 'testTextArea'}]

How can I bind data to the controls now? I have tried using state, but not able to achieve that. or i can update first schema and add value key to it after i get second api response something like below,

 fields = [{ id: 1, input: 'TextBox', value: 'testTextBox'},
     { id: 2, input: 'TextArea', value: 'testTextArea'}]

Please suggest how to loop and add value key to fields array?