In my react application I am using the array map() function to generate JSX. In that, I am using useState to set the values to an array. I am using a counter to manage the index of the array.

let c= 0
    arr.map((arr2, index) => {
                    c++ 
                    chk_str = arr2.map((value) => {
                    frc_t_id = value.t_id;
                        return <div class="form-check mb-1">
                            <input type="checkbox" class="form-check-input" value={value.domain} onChange={e => {setData(data.splice(c, 0, {domain: e.target.value}))}} />
                            <label class="form-check-label" for="exampleCheck1">{value.domain}</label>
                        </div>
                    })
    
                    return <div className="FormGroup col-md-12">{chk_str}
                        <select name="status" id="" placeholder="Server Status type" class="custom-select" onChange={e => {console.log(c); data[c].server = e.target.value; setData(data)}}>
                            <option value={t_id}>{host_name}</option>
                            <option value={frc_t_id}>{keys[index]}</option>
                        </select></div>
                })

There are two elements in the first array. Here the problem is that in the dropdown onChange event the counter value c is always 2. Please help