I am trying to map an array of objects in a form based on user input,

Here is the array of objects:

const arrObj= [
    {item_name: 'test name 1', item_id: 'testname1'}
  ]

Then a user will input a number into a number field on the form, when they do, my onChange function takes the input as a parameter and adds another index to the array and increases the integer stored in the string (the 1 in test name, so the next input should be test name 2)

Here is the on change function

 const addItems= (numOfItems) =>{
    
    for(let i=0; i<numOfItems; i++){
      arrObj.push({item_name:`test name ${i+2}`, item_id:`testname${i+2}`})
    }

    //Console logging does show that function works as intended
    console.log(arrObj)

  }

Now for the grand finale, I am trying to map each item to a multi-select checkbox:

<FormGroup>
                  {arrObj.map((item, index) => (
                    <FormControlLabel
                      key={index}
                      control={
                        <Checkbox
                          name={item.item_name}
                          id={item.item_id}
                          color="primary"
                          classes={{
                            root: classes.checkbox,
                            checked: classes.checked,
                          }}
                        />
                      }
                      label={item.item_name}

                //These checked and onChange is for holding the checked state 
                      checked={valTestItemName[index].length > 0 ? valTestItemName[index].includes(item.item_name) : false}
                      onChange={evt => handleTestItemName(evt, index)}
                    />
                  ))}
                </FormGroup>

Only thing popping up is a blank checkbox. But, when logging the arrObj, I see it is populated as intended. Thank you for the help.

Here is my console.log output if it helps:

0: {item_name: 'test name 1', item_id: 'testname1'}
1: {item_name: 'test name 2', item_id: 'testname2'}
2: {item_name: 'test name 3', item_id: 'testname3'}
length: 3