Build a component that displays a hierarchical structure of checkboxes. The component should handle parent-child relationships between checkboxes and manage their states efficiently.

Requirements

• A checkbox's value is determined by the value of its direct children:
  • When all children of a parent are checked, the parent should be checked.
  • When some (but not all or none) children of a parent are checked, the parent should be in an indeterminate state, with a dash displayed within the box.
  • When none of the children of a parent are checked, the parent is unchecked.
• If a parent checkbox is checked or unchecked, all the descendant checkboxes (not just direct children) are updated with that new value.
• The focus of the exercise is functionality, not styling. You may style the checkboxes in any way you prefer as long as the states are clear.

Data format

interface CheckboxItem {
  id: number;
  name: string;
  checked: boolean | 'indeterminate';
  children?: CheckboxItem[];
}

Example data:

const fileData = [
  {
    id: 1,
    name: 'Electronics',
    children: [
      {
        id: 2,
        name: 'Mobile phones',
        children: [
          {
            id: 3,
            name: 'iPhone',
          },
          {
            id: 4,
            name: 'Android',
          },
        ],
      },
      {
        id: 5,
        name: 'Laptops',
        children: [
          {
            id: 6,
            name: 'MacBook',
          },
          {
            id: 7,
            name: 'Surface Pro',
          },
        ],
      },
    ],
  },
  {
    id: 8,
    name: 'Books',
    children: [
      {
        id: 9,
        name: 'Fiction',
      },
      {
        id: 10,
        name: 'Non-fiction',
      },
    ],
  },
  {
    id: 11,
    name: 'Toys',
  },
];