File Tree in JavaScript

A file tree shows folders inside folders, like your editor's list of files. The data is TREE: an array of nodes, where a folder has children (more nodes) and a file has only a name. One state, expanded, holds the folder objects that are open.

A button that opens and closes something tells screen readers whether it is open with aria-expanded. The check prints it after the button's name, as (expanded) or (collapsed). For example, a single "Details" button:

const [open, setOpen] = useState(false);

<button aria-expanded={open} onClick={() => setOpen(!open)}>Details</button>
{open && <p>Ships in 2 days.</p>}

A tree needs this at any depth. So the Tree component renders itself for an open folder's children, and a function allFolders calls itself to collect every folder, for an Expand all button. The check must print (shortened):

> open the page
    heading 1: Files
    button: Expand all
    list
      item: button: src (collapsed)
      item: button: public (collapsed)
      item: index.html
      item: package.json
> click "src"          - button: src (collapsed)   + button: src (expanded)
                       + list: button: components (collapsed), item: App.jsx, item: main.jsx
> click "components"   + button: components (expanded)   + list: Cart.jsx, ProductList.jsx
> click "components"   + button: components (collapsed), its list goes
> click "src"          + button: src (collapsed), its list goes
> click "Expand all"   src, components and public (expanded), with all their lists
> click "src"          + button: src (collapsed), its list goes

Your task: in src/App.jsx, give each folder button aria-expanded and an onClick, make toggle open and close a folder, show an open folder's children as a nested Tree, write allFolders, and add an Expand all button.

Assignment
Follow the Coding Tutorial to open and close folders, nest a Tree for each open folder, collect every folder with allFolders and open them all with Expand all.

Hint
Tree and allFolders each handle one level and call themselves for node.children. filter and the spread [...expanded, node] make new arrays, so React sees every change.