En mi aplicación de reacción, estoy usando la función array map() para generar JSX. En eso, estoy usando useState para establecer los valores en una matriz. Estoy usando un contador para administrar el índice de la matriz.

 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> })

Hay dos elementos en la primera matriz. Aquí el problema es que en el evento desplegable onChange el valor del contador c siempre es 2. Por favor ayuda