Multiple and Multi selected Checkboxes in ReactJS

So I'm starting to learn in a very difficult way React.

I just stumbled upon in a problem:

Checkboxes.

The logic should be like (Just a quick sample of how it should work):

If None is Selected Then 01 to 05 can't be selected then everything is disabled, and everything should update the endpoint.

https://codepen.io/lockeag/pen/NWGexXv (This sample had a flow, it will enable None with any checkbox unchecked and it should enable None with no other checkbox checked, but it will serve as an example)

That sample uses DOM to make sure the checkbox is checked, but in React we have States, and I would like to understand a little bit more that.

this is my first exercise (is not even saving in the db):

import React, { useState, useEffect, Suspense } from 'react'
import {ApiUrl} from '../../utils/ApiUrl'
import { getToken } from '../../utils/Auth'
import { Row, Col, Card, CardBody, Form, FormGroup, Label, Input, Button, Table, CustomInput, Container } from 'reactstrap';
import axios from 'axios'
import { useHistory } from "react-router-dom";

export default function EditSheet(props) {

const getSheet = () => {

        const config = {
          headers: { Authorization: `Bearer ${getToken()}` }
        };

        axios.get(`${Url}/sheets/${props.id}`, config)
        .then(res => {
            if(res.data.sheet.Aht){
                setAht(res.data.sheet.Aht)
            }
            else{
                setAht('')
            }

            setLoading(false)
        })
        .catch(console.error);
}

 const onSubmitSheet = e =>{
        e.preventDefault() 
        const newData = {
            "Aht": Aht,

        }

        editSheet(newData)

} 

    const editSheet = async(sheetData) => {
        const myHeaders = new Headers();
        myHeaders.append("Authorization", `Bearer ${getToken()}`);
        myHeaders.append("Content-Type", "application/json");

        const raw = JSON.stringify(sheetData);

        const requestOptions = {
        method: 'PUT',
        headers: myHeaders,
        body: raw,
        redirect: 'follow'
        };

        fetch(`${Url}/sheets/${props.id}`, requestOptions)
        .then(response => response.json())
        .then(result => {
            if(result.status === "ok"){
                history.push("/dashboard/sheets");
            }
        })
        .catch(error => console.error(`Erro: ${error}`));

    };


const [Aht, setAht] = useState({
    num: '',
    isChecked: false
})

const handleInputChangeHipe = (e) => {
    const target = e.target
    let numVal = parseInt(target.value)
    const arr = [...Aht]
    const newArr = arr.filter(item => item !== numVal)
    const value = target.type === "checkbox" ? target.checked : target.value;

    if(target.checked){
        setAht({
            ...Aht,
            num: numVal,
            [target.name]: value
        })

        console.log(`${numVal} is ${value}. should be added.`);

    } else {

        console.log(newArr)
        setAht({
            ...Aht,
            num: newArr,
            [target.name]: value
        })
        console.log(`${numVal} is ${value}. will not be added.`);

    }
}

 return (
        <>
        <div className="content">
                        <Container fluid>
                            <Suspense>
                                {
                                loading ?
                                <h5>Cargando...</h5> :
                                <>
                                <Form onSubmit={onSubmitSheet} method="post">
                                    <FormGroup>

                                    <Label for="exampleCheckbox">Aht</Label>                                                   
                                    <div>
                                        <CustomInput 
                                        id="hiper0" 
                                        type="checkbox" 
                                        label="None" 
                                        value="0" 
                                        checked={Aht.isChecked} 
                                        onChange={handleInputChangeHipe} 
                                        /> 
                                        <CustomInput 
                                        id="hiper1" 
                                        type="checkbox" 
                                        label="One" 
                                        value="1" 
                                        onChange={handleInputChangeHipe} 
                                        checked={Aht.isChecked} /> 
                                        <CustomInput 
                                        id="hiper2" 
                                        type="checkbox" 
                                        label="Two" 
                                        value="2" 
                                        onChange={handleInputChangeHipe} 
                                        checked={Aht.isChecked} />
                                        <CustomInput 
                                        id="hiper3" 
                                        type="checkbox" 
                                        label="Three" 
                                        value="3" 
                                        onChange={handleInputChangeHipe} 
                                        checked={Aht.isChecked}/>
                                        <CustomInput 
                                        id="hiper4" 
                                        type="checkbox" 
                                        label="Four" 
                                        value="4" 
                                        onChange={handleInputChangeHipe} 
                                        checked={Aht.isChecked}/>
                                        <CustomInput 
                                        id="hiper5" 
                                        type="checkbox" 
                                        label="Others" 
                                        value="5" 
                                        onChange={handleInputChangeHipe} 
                                        checked={Aht.isChecked}/>
                                    </div>
                                    </FormGroup>
                                    </Form>
                                </>
                                }
                            </Suspense>
                        </Container>
        </div>
        </>
    )
}

This exercise above is just to understand how is everything working, and how can I check the State , also saving and editing to the endpoint.

But as you can imagine is full of flows

My Questions

• First I have to Use Axios because Fetch wasn't letting me get the endpoint, but Fetch allows me to edit (🤦)
• Every time I uncheck I got a TypeError:

Uncaught TypeError: object is not iterable (cannot read property Symbol(Symbol.iterator))

But if I change the React.UseState , and call the fucntion as an array it will work also with the DOM flow that I'm really looking to change:

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

const handleInputChangeHipe = (e) => {
    const target = e.target
    let numVal = parseInt(target.value)
    const arr = [...Aht]
    const newArr = arr.filter(item => item !== numVal)

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

    if(target.checked){
        setAht([
            ...Aht,
            numVal,
        ])

        console.info(`${numVal} is ${value}. should be added.`);

    } else {
        console.log(newArr)
        setAht(AhtnewArr)

        console.info(`${numVal} is ${value}. will not be added.`);

    }

Thanks