Changing more than one checkBox with useState (Ionic-React)

Hello, I am trying to accomplish a checkbox list with an All functionality. The “ALL” toggle works to turn all the checkboxs from the list on/off. But once i try to toggle off the “ALL” checkbox once i unselect another item from the list, it doesnt work as expected, as it does not toggle off the item i selected. I used logs to see the behavior, and once the “ALL” logic kicks in, it appears that the whole list gets rerender and triggers the onChange with the new values. Any help is appreciate it

interface ContainerProps {
  name: string;
  flag: boolean;

const initList: ContainerProps[] = [
  {name: "ALL", flag: false},
  {name: "First item", flag: false},
  {name: "Second item", flag: false},
  {name: "Third item", flag: false},
  {name: "Fourth item", flag: false},
const PodCounter: React.FC = () => {
  const [propsList, setList] = useState(initList)
  const onClick = (value: string, check: boolean) => {
    const tempList = [...propsList]
    if (value === "ALL" && check === true) {
        item.flag = check
    } if (value != "ALL" && tempList[0].flag === true && check === false){
      tempList[0].flag = check
    }else {
        if ( === value){
          item.flag = check
    console.log("tempList", tempList)

  return (
        {, index)=>(
                  <IonItem key={index}>
                  <IonCheckbox slot="end" value={} checked={obj.flag} onIonChange={e => onClick(e.detail.value, e.detail.checked)}></IonCheckbox>

This is what the app/console looks like when i clicked the “ALL” checkbox

if manage all separately from the rest of the items in the list, it should lead to an easier solution

Do you mean like a indeterminate list for this? i was hoping not to get to that solution but if it’s the most optimal, I would have to go there.
I just wanted to understand a bit more on how the array of States work under this type of cases