Simple FileTree component

FileTree.jsx

const FileTreeStyles = styled.ul`
  button {
    font-family: monospace;
    background: none;
    border: 0;
    padding: 0.125em 0;

    &:hover {
      background: #f002;
    }
  }
`;

function FileTree({ rootNode, root = true, onClick }) {
  const [showChildren, setShowChildren] = useState(false);

  const RootNode = root ? FileTreeStyles : Fragment;

  return (
    <RootNode>
      <li>
        <button
          type="button"
          className="file-tree"
          onClick={() => setShowChildren((current) => !current)}
        >
          {showChildren ? "▼" : "▶️"} {rootNode.name}
        </button>
      </li>
      {showChildren && (
        <ul style={{ paddingLeft: "1em" }}>
          {rootNode.children.map((childNode) => {
            if (childNode.children) {
              return <FileTree rootNode={childNode} root={false} onClick={onClick} />;
            }
            return (
              <li>
                <button type="button" onClick={() => onClick(childNode)}>
                  📄 {childNode.name}
                </button>
              </li>
            );
          })}
        </ul>
      )}
    </RootNode>
  );
}