You are given an array of objects representing files and directories. Build a component that renders them in a tree-like structure.

Each object can be one of two types:

File: A leaf node with no children.
Directory: Can contain other files or directories as children.

Assume that IDs and names are unique within the same directory.

Requirements

Display

Show the names of all files and directories.
Directories should be visually distinct from files.

Directories

Clicking a directory toggles between expanded and collapsed states.
Contents should be indented to indicate hierarchy.
Directories appear before files, and items are sorted alphabetically within each group.
Directories may be empty.

Files

Files are leaf nodes and cannot be expanded or interacted with.

Focus on functionality rather than styling.

Data format

interface FileObject {
  id: number;
  name: string;
  children?: FileObject[];
}

Example data:

const fileData = [
  {
    id: 1,
    name: 'README.md',
  },
  {
    id: 2,
    name: 'Documents',
    children: [
      {
        id: 3,
        name: 'Word.doc',
      },
      {
        id: 4,
        name: 'Powerpoint.ppt',
      },
    ],
  },
];