I have used checkbox in my react application. I don't know why it is not getting checked/unchecked on click. I am using Hashmap to get true/false and passing same to the checked attribute.

In below code - variable "checkBoxSelectedHash" is hashmap having value true/false.

Note: I did checked the console of variable "checkBoxSelectedHash" also It is getting changed correctly But don't know why it is not getting reflected in checkbox.

                <tbody>

                        {reservationSourceDetail ? reservationSourceDetail.map((value, index) => (

                          <tr key={index}>
                            <td>{value.ota_name}</td>
                            {rateCodeDetail ? rateCodeDetail.map((val) => (

                              <td style={{ textAlign: "center" }}>

                                <input className="form-check-input" type="checkbox"
                                checked={checkBoxSelectedHash[value.ota_id+"_"+val.name]}
                                onChange={() => handleCheckBox(value.ota_id, val.name)}
                                /> 
                                
                              </td>

                            )) : ""}

                          </tr>
                        )) : ""

                        }
                      </tbody>

For on change handleCheckBox function below :

const handleCheckBox = (ota_id, rate_code_name) => {

    let temp_checkBoxSelectedHash = checkBoxSelectedHash;

    temp_checkBoxSelectedHash[ota_id+"_"+rate_code_name] = !temp_checkBoxSelectedHash[ota_id+"_"+rate_code_name];

    setCheckBoxSelectedHash(temp_checkBoxSelectedHash);
  }