How to remove element from array if the main checkbox is unchecked

So I have a sample here where there is an option of checkboxes A, B, and C. In here, I used [arr, setArr] as a state hook when I check one of the boxes, a list of checkboxes display according to the main checkboxes. (Check A checkbox -> display A1, A2.. etc.).

So inside the checkboxes, I check one of the sub-checkboxes (A1, A2), and a button [VIEW LIST] to display the checked boxes displayed in the console.

  const [arr, setArr] = useState([]); // CHECKBOX OPTIONS

  const [arrList, setArrList] = useState([]); // LIST OF CHECKED BOXES

  // ARRAY
  const arrA = ["A1", "A2", "A3", "A4"];
  const arrB = ["B1", "B2", "B3", "B4"];
  const arrC = ["C1", "C2", "C3", "C4"];

  // MAIN CHECKBOX OPTIONS
  const handleArr = (e) => {
    var updatedArr = [...arr];

    let target = e.target.value == "A" ? arrA : e.target.value == "B" ? arrB : arrC
    
    if (e.target.checked) {
      updatedArr = [...arr, target];
    } else {
      updatedArr.splice(arrList.indexOf(e.target.value), 1);
    }

    setArr(updatedArr);
  };

  // SUB CHECKBOX
  const handleArrList = (e) => {
    var updatedArrList = [...arrList];

    if (e.target.checked) {
      updatedArrList = [...arrList, e.target.value];
    } else {
      updatedArrList.splice(arrList.indexOf(e.target.value), 1);
    }

    setArrList(updatedArrList);
  };

  return (
    <div>
      <div className="flex">
        <div>
          A <input type="checkbox" value="A" onChange={(e) => handleArr(e)} />
        </div>
        <div>
          B <input type="checkbox" value="B" onChange={(e) => handleArr(e)} />
        </div>
        <div>
          C <input type="checkbox" value="C" onChange={(e) => handleArr(e)} />
        </div>
      </div>

      {/* MAIN-CHECKBOX */}
      {arr.map((i, index) => {
        return (
          <div key={index}>
            {/* SUB-CHECKBOX */}
            {i.map((j, index) => {
              return (
                <div key={index}>
                  {j}
                  <input
                    type="checkbox"
                    value={j}
                    onChange={(e) => handleArrList(e)}
                  />
                </div>
              );
            })}
          </div>
        );
      })}
      {/* VIEWING THE VALUES INSIDE THE CHECKED LIST */}
      <button onClick={(e) => console.log(arrList)}>VIEW LIST</button>
    </div>
  );

Here's where I'm getting the problem.

• Whenever I uncheck the main checkbox (uncheck A) without unchecking the sub-checkboxes (A1, A2), the list inside the console still displays when I view the list and when I recheck the main checkbox (A), the sub-checkboxes all unchecked.
• Checking the main checkbox B and then main checkbox C will display the sub-checkboxes of B and C. However, unchecking main checkbox B (which leaves main checkbox C behind) only removes the sub-checkboxes of C

Is there a way on how to clear the elements inside the arrList when the main checkbox has been unchecked? (ie: uncheck main checkbox A -> remove all elements inside the arrList that is under main checkbox A). Also how to view the sub checkbox list according to the main checkboxes? (Unchecking the main checkbox removes the sub checkboxes that is under the main checkbox)