mria tengo esto:

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

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

  const handleFolderSelect = async (
    event: React.ChangeEvent<HTMLInputElement>
  ) => {
    const files = event.target.files;
    if (files && files.length > 0) {
      const { tree, contents } = await listFolderContents(files);
      setFolderStructure(tree);
      setFileContents(contents);
      downloadTextFile(
        `${tree}\n${contents}`,
        "folder_structure_and_contents.txt"
      );
    }
  };

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

    // Construir el mapa de carpetas
    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);
    }

    // Generar la estructura del árbol
    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);

    // Generar el contenido de los archivos
    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 { tree: treeStructure, contents: 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 de la carpeta:
            </h2>
            <pre className="bg-gray-100 p-4 rounded-md overflow-x-auto text-sm whitespace-pre-wrap">
              {folderStructure}
            </pre>
          </div>
        )}
        {fileContents && (
          <div className="mt-4">
            <h2 className="text-xl font-semibold mb-2">
              Contenido de los archivos:
            </h2>
            <pre className="bg-gray-100 p-4 rounded-md overflow-x-auto text-sm whitespace-pre-wrap">
              {fileContents}
            </pre>
          </div>
        )}
      </div>
    </div>
  );
}

export default App;


y necesito que en la parte de la estructura de la carpeta me muestre todo lo que tenga esa carpeta, como si fuera un tree, me hago entender?