mira, tengo esto:

import React, { useState } from "react";
import { FolderTree } from "lucide-react";

function App() {
  const [folderStructure, setFolderStructure] = useState<string>("");

  const handleFolderSelect = async (
    event: React.ChangeEvent<HTMLInputElement>
  ) => {
    const files = event.target.files;
    if (files && files.length > 0) {
      const structure = await listFolderContents(files);
      setFolderStructure(structure);
      downloadTextFile(structure, "folder_structure_and_contents.txt");
    }
  };

  const listFolderContents = async (fileList: FileList): Promise<string> => {
    let treeStructure = "Folder Structure:\n\n";
    let fileContents = "\nFile Contents:\n";
    const files = Array.from(fileList);
    const folderMap = new Map<string, string[]>();

    // Build folder structure
    for (const file of files) {
      const relativePath = file.webkitRelativePath || file.name;
      const parts = relativePath.split("/");
      const folderPath = parts.slice(0, -1).join("/");
      const fileName = parts[parts.length - 1];

      if (!folderMap.has(folderPath)) {
        folderMap.set(folderPath, []);
      }
      folderMap.get(folderPath)!.push(fileName);
    }

    // Generate tree structure
    const generateTree = (path: string, depth: number) => {
      const prefix = "│  ".repeat(depth);
      const files = folderMap.get(path) || [];

      for (let i = 0; i < files.length; i++) {
        const isLast = i === files.length - 1;
        const fileName = files[i];
        const fullPath = path ? `${path}/${fileName}` : fileName;

        treeStructure += `${prefix}${isLast ? "└─ " : "├─ "}${fileName}\n`;

        if (folderMap.has(fullPath)) {
          generateTree(fullPath, depth + 1);
        }
      }
    };

    generateTree("", 0);

    // Generate file contents
    for (const file of files) {
      const relativePath = file.webkitRelativePath || file.name;
      fileContents += `\nFile: ${relativePath}\n`;
      fileContents += "=".repeat(relativePath.length + 6) + "\n";
      const content = await readFileContent(file);
      fileContents += `${content}\n\n`;
    }

    return treeStructure + fileContents;
  };

  const readFileContent = (file: File): Promise<string> => {
    return new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.onload = (event) => {
        if (event.target) {
          const content = event.target.result as string;
          resolve(content);
        }
      };
      reader.onerror = (error) => reject(error);
      reader.readAsText(file);
    });
  };

  const downloadTextFile = (content: string, fileName: string) => {
    const element = document.createElement("a");
    const file = new Blob([content], { type: "text/plain" });
    element.href = URL.createObjectURL(file);
    element.download = fileName;
    document.body.appendChild(element);
    element.click();
    document.body.removeChild(element);
  };

  return (
    <div className="min-h-screen bg-gray-100 flex flex-col items-center justify-center p-4">
      <h1 className="text-3xl font-bold mb-6">
        Estructura de Carpetas y Contenido de Archivos
      </h1>
      <div className="bg-white p-8 rounded-lg shadow-md w-full max-w-2xl">
        <label
          htmlFor="folder-input"
          className="flex items-center justify-center w-full px-4 py-2 bg-blue-500 text-white rounded-lg cursor-pointer hover:bg-blue-600 transition-colors"
        >
          <FolderTree className="mr-2" />
          Seleccionar Carpeta
        </label>
        <input
          id="folder-input"
          type="file"
          webkitdirectory="true"
          directory=""
          className="hidden"
          onChange={handleFolderSelect}
        />
        {folderStructure && (
          <div className="mt-4">
            <h2 className="text-xl font-semibold mb-2">
              Estructura y contenido de la carpeta:
            </h2>
            <pre className="bg-gray-100 p-4 rounded-md overflow-x-auto text-sm whitespace-pre-wrap">
              {folderStructure}
            </pre>
          </div>
        )}
      </div>
    </div>
  );
}

export default App;


pero necesito que me soluciones un error que tengo y es que no me está sacando la lista de los archivos como si fuera un tree, me esta dando es esto:

Folder Structure:


File Contents:

File: estructura-proyectos/index.html
=====================================
<!DOCTYPE html>
<html>
<head>
  <title>Ejemplo</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <button id="miBoton">Haz clic aquí</button>
  <script src="script.js"></script>
</body>
</html>


File: estructura-proyectos/script.js
====================================
const boton = document.getElementById("miBoton");

boton.addEventListener("click", function() {
  if (boton.style.backgroundColor === "blue") {
    boton.style.backgroundColor = "red";
  } else {
    boton.style.backgroundColor = "blue";
  }
});


File: estructura-proyectos/style.css
====================================
#miBoton {
    background-color: blue;
    color: white;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
  }