FolderTree.js

const FolderTree = ({folders}) => (
  <ul>
    {folders.map(folder => (
      <Item key={folder.name} folder={folder} />
    ))}
  </ul>
);

const Item = ({folder}) => {
  const [isOpen, setIsOpen] = useState(false);
  return (
    <li>
      <button type="button" onClick={() => setIsOpen((state) => !state)}>
        {isOpen ? "-" : "+"}
      </button>{" "}
      {folder.name}
      {isOpen && folder.contents?.length > 0 && (
        <FolderTree folders={folder.contents} />
      )}
    </li>
  );
};