Checkbox Checked React

checkbox_checked.js

const [aht, setAht] = useState('')


<Col lg={4}>
  <FormGroup>
    <Label for="aht">AHT</Label>
    <div>
      {aht.includes(0) ? (
        <CustomInput
          id="hiper0"
          type="checkbox"
          label="Ninguno"
          value="0"
          onChange={handleInputChangeH}
          checked={true}
        />
      ) : (
        <CustomInput
          id="hiper0"
          type="checkbox"
          label="Ninguno"
          value="0"
          onChange={handleInputChangeH}
        />
      )}

      {aht.includes(1) ? (
        <CustomInput
          id="hiper1"
          type="checkbox"
          label="IECA"
          value="1"
          onChange={handleInputChangeH}
          checked={true}
        />
      ) : (
        <CustomInput
          id="hiper1"
          type="checkbox"
          label="IECA"
          value="1"
          onChange={handleInputChangeH}
        />
      )}
      {aht.includes(2) ? (
        <CustomInput
          id="hiper2"
          type="checkbox"
          label="ARA"
          value="2"
          onChange={handleInputChangeH}
          checked={true}
        />
      ) : (
        <CustomInput
          id="hiper2"
          type="checkbox"
          label="ARA"
          value="2"
          onChange={handleInputChangeH}
        />
      )}
      {aht.includes(3) ? (
        <CustomInput
          id="hiper3"
          type="checkbox"
          label="Calcio antagonista"
          value="3"
          onChange={handleInputChangeH}
          checked={true}
        />
      ) : (
        <CustomInput
          id="hiper3"
          type="checkbox"
          label="Calcio antagonista"
          value="3"
          onChange={handleInputChangeH}
        />
      )}
      {aht.includes(4) ? (
        <CustomInput
          id="hiper4"
          type="checkbox"
          label="Diurético"
          value="4"
          onChange={handleInputChangeH}
          checked={true}
        />
      ) : (
        <CustomInput
          id="hiper4"
          type="checkbox"
          label="Diurético"
          value="4"
          onChange={handleInputChangeH}
        />
      )}
      {aht.includes(5) ? (
        <CustomInput
          id="hiper5"
          type="checkbox"
          label="Tiazida"
          value="5"
          onChange={handleInputChangeH}
          checked={true}
        />
      ) : (
        <CustomInput
          id="hiper5"
          type="checkbox"
          label="Tiazida"
          value="5"
          onChange={handleInputChangeH}
        />
      )}
      {aht.includes(6) ? (
        <CustomInput
          id="hiper6"
          type="checkbox"
          label="Otro"
          value="6"
          onChange={handleInputChangeH}
          checked={true}
        />
      ) : (
        <CustomInput
          id="hiper6"
          type="checkbox"
          label="Otro"
          value="6"
          onChange={handleInputChangeH}
        />
      )}
    </div>
  </FormGroup>
</Col>;

const handleInputChangeH = (e) => {
  if(e.target.value !=0 && e.target.checked ){
            document.getElementById("hiper0").checked = false
            document.getElementById("hiper0").disabled = true

            console.log(e.target.value)
            
        }else {
            document.getElementById("hiper0").disabled = false

        }
  
  if (e.target.checked) {
    let num = parseInt(e.target.value);
    setAht([
      ...aht,
      num,
    ]);
  } else {
    const arr = [...aht];
    let num = parseInt(e.target.value);
    const newArr = arr.filter((item) => item !== num);
    setAht(newArr);
  }
};