Problem with checkbox state after marking everyone as checked

When I try to mark single checkboxes, it works. IF I then mark the topbox that changes everyone to marked, it also works. But when I try to undo the marks, everyone gets unmarked, except for the ones i clicked before clicking the "check everyone" box.

Ive tried editing state and fixing the input in the button. But it doesnt seem to work, no matter what.

handleOnClick = (idx, checked) => {
            this.setState( {
                checked: {
                    ...this.state.checked,
                    [idx]: checked
                },
            })
    }


//For columns
<Checkbox id="headerCheckbox"
                 defaultChecked={false}
                 onClick={this.handleOnClick.bind(this,'all', !checked.all)}
                 checked={checked.all || false}
                 onChange={() => {}}
/>

//for rows
<Checkbox id={row._id} defaultChecked={false}
                onChange={() => {}}
                onClick={this.handleOnClick.bind(this, index, !checked[index])}
                checked={checked[index] || checked.all || false}
  />

Expected result is that if I click on some of my boxes for rows, then the column one, it should mark everyone, which it does. When I then click again, its supposed to uncheck all the boxes in my table, but it only unchecks the ones I did not click before I clicked the "mark everyone" box