Hi i am trying to manage multiple checkbox with multiple input in same map can anyone tell me how can i do it here is my code the main problem is that when i try to add some input afterwards another ita takes wronge indexing

GetCryptoHtml = (criptoList) => {
return criptoList.map((value, i) => {
  return (
    <>
      <div className="col-md-3 col-12">
        <input
          className="checked"
          id={i + "checkbox"}
          type="checkbox"
          onChange={(e) => this.onChangeCheck(e, value, i)}
          name={"cryptoCurrency" + [i]}
          value={value.id}
        />{" "}
        <label for="vehicle1"> {value.name}</label>
      </div>
      <div className="col-md-9 col-12">
        <div className="form-group">
          {/* {
          checkingInput ? */}
          <input
            type="text"
            id={i + "percentage"}
            name={"percentage" + [i]}
            onChange={(e) => this.onChangeInputBox(e, i ,value.name)}
            value={this.state.percentage[i]}
            className="form-control"
          />
          {/* <input type="text" onChange={(e) => this.checkWordInput(e)} id="percentage[i]" name="percentage[i]" /> : <></> */}
          {/* } */}
        </div>
      </div>
      <br />
    </>
  );
});

And Here's the onChange function for both

  onChangeCheck = async (e, value, i) => {
var percentage = document.getElementById(i + "percentage").value;
if (e.target.checked) {
    this.setState({
        checkedCheck: true
    });
    this.state.data2.push(value.short_name);
    if (this.state.percentage[i] !== undefined) {
        this.state.percentage[i] = this.state.percentage[i];
    } else {
        this.state.percentage.push("");
    }
} else {
    this.setState({
        checkedCheck: false
    });
    this.state.data2.pop(value.short_name);
    this.state.percentage[i] = "";
}

this.setState({
    cryptoCurrency: "update"
});