Implement Nested Checkboxes

Implement a component that renders a nested checkboxes for each item in the Javascript object.

Use Vanilla JS and HTML, no frameworks or libraries.

Don't care about the styling, focus on the functionality.

Requirements:

• The component should be able to handle nested checkboxes.
• The component should be able to handle the following states: checked, unchecked, indeterminate
• Selecting a parent checkbox should select all children checkboxes
• If all child checkboxes are selected, then parent checkbox should be selected
• If any child is unselected, then parent checkbox should be indeterminate
• The structure should be recursive and support any level of nesting

Example

• Input:

const data = [
  {
    id: 1,
    label: "Fruits",
    checked: false,
    children: [
      { id: 2, label: "Apple", checked: false },
      { id: 3, label: "Banana", checked: false },
      {
        id: 4,  
        label: "Citrus",
        checked: false,
        children: [
          { id: 5, label: "Orange", checked: false },
          { id: 6, label: "Lemon", checked: false },
        ],
      },
    ],
  },
  {
    id: 7,
    label: "Vegetables",
    checked: false,
    children: [
      { id: 8, label: "Tomato", checked: false },
      { id: 9, label: "Cucumber", checked: false },
    ],
  },
];

• Output:

[x] Fruits
  [x] Apple
  [x] Banana
  [x] Citrus
    [x] Orange
    [x] Lemon
[x] Vegetables
  [x] Tomato
  [x] Cucumber