tengo este codigo:

import React, { useState, ChangeEvent, InputHTMLAttributes } from "react";
import { FolderTree, Download, CheckCircle, AlertCircle } from "lucide-react";

interface DirectoryInputProps extends InputHTMLAttributes<HTMLInputElement> {
  webkitdirectory?: boolean;
  directory?: boolean;
}

interface TreeNode {
  name: string;
  children?: TreeNode[];
}

function App() {
  const [folderStructure, setFolderStructure] = useState<string>("");
  const [isLoading, setIsLoading] = useState<boolean>(false);
  const [error, setError] = useState<string>("");

  const handleFolderSelect = async (event: ChangeEvent<HTMLInputElement>) => {
    const files = event.target.files;
    if (files && files.length > 0) {
      setIsLoading(true);
      setError("");
      try {
        const structure = await listFolderContents(files);
        setFolderStructure(structure);
        downloadTextFile(structure, "folder_structure_and_contents.txt");
      } catch (err) {
        setError("Ocurrió un error al procesar los archivos.");
      } finally {
        setIsLoading(false);
      }
    }
  };

  const listFolderContents = async (fileList: FileList): Promise<string> => {
    const root: TreeNode = { name: "", children: [] };

    const files = Array.from(fileList);

    // Construir el árbol
    for (const file of files) {
      const relativePath = file.webkitRelativePath || file.name;
      const parts = relativePath.split("/");
      let currentNode = root;

      parts.forEach((part) => {
        if (!currentNode.children) {
          currentNode.children = [];
        }

        let childNode = currentNode.children.find(
          (child) => child.name === part
        );
        if (!childNode) {
          childNode = { name: part, children: [] };
          currentNode.children.push(childNode);
        }

        currentNode = childNode;
      });
    }

    // Generar la representación en cadena del árbol
    let treeStructure = "Folder Structure:\n\n";

    const generateTreeString = (
      node: TreeNode,
      prefix: string = "",
      isLast: boolean = true
    ): void => {
      if (node.name !== "") {
        // Ignorar la raíz
        treeStructure += `${prefix}${isLast ? "└─ " : "├─ "}${node.name}\n`;
      }

      const children = node.children || [];
      children.forEach((child, index) => {
        const last = index === children.length - 1;
        const newPrefix = prefix + (isLast ? "    " : "│   ");
        generateTreeString(child, newPrefix, last);
      });
    };

    generateTreeString(root);

    // Generar el contenido de los archivos
    let fileContents = "\nFile Contents:\n";
    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-gradient-to-r from-blue-50 to-purple-100 flex flex-col items-center justify-start p-4">
      <header className="w-full max-w-2xl mb-8">
        <h1 className="text-4xl font-extrabold text-center text-gray-800 mb-4">
          Explorador de Carpetas
        </h1>
        <p className="text-center text-gray-600">
          Selecciona una carpeta para visualizar su estructura y contenidos.
        </p>
      </header>

      <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-3 bg-blue-600 text-white rounded-lg cursor-pointer hover:bg-blue-700 transition-colors duration-200"
        >
          <FolderTree className="mr-2 w-5 h-5" />
          <span className="font-medium">Seleccionar Carpeta</span>
        </label>
        <input
          id="folder-input"
          type="file"
          webkitdirectory
          directory
          className="hidden"
          onChange={handleFolderSelect}
        />

        {isLoading && (
          <div className="flex items-center mt-4">
            <svg
              className="animate-spin -ml-1 mr-3 h-5 w-5 text-blue-500"
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
            >
              <circle
                className="opacity-25"
                cx="12"
                cy="12"
                r="10"
                stroke="currentColor"
                strokeWidth="4"
              ></circle>
              <path
                className="opacity-75"
                fill="currentColor"
                d="M4 12a8 8 0 018-8v8H4z"
              ></path>
            </svg>
            <span className="text-gray-700">Procesando...</span>
          </div>
        )}

        {error && (
          <div className="flex items-center mt-4 text-red-600">
            <AlertCircle className="mr-2 w-5 h-5" />
            <span>{error}</span>
          </div>
        )}

        {folderStructure && !isLoading && !error && (
          <div className="mt-6">
            <div className="flex items-center justify-between mb-4">
              <h2 className="text-2xl font-semibold text-gray-800">
                Estructura y Contenido de la Carpeta
              </h2>
              <button
                onClick={() =>
                  downloadTextFile(
                    folderStructure,
                    "folder_structure_and_contents.txt"
                  )
                }
                className="flex items-center px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-colors duration-200"
              >
                <Download className="mr-2 w-5 h-5" />
                Descargar
              </button>
            </div>
            <div className="bg-gray-50 p-4 rounded-md shadow-inner overflow-x-auto">
              <pre className="whitespace-pre-wrap font-mono text-sm text-gray-800">
                {folderStructure}
              </pre>
            </div>
            <div className="flex items-center mt-4 text-green-600">
              <CheckCircle className="mr-2 w-5 h-5" />
              <span>¡Estructura generada y descargada exitosamente!</span>
            </div>
          </div>
        )}
      </div>

      <footer className="mt-8 text-sm text-gray-500">
        &copy; {new Date().getFullYear()} Tu Empresa. Todos los derechos
        reservados.
      </footer>
    </div>
  );
}

export default App;


necesito que se visualice las carpetas, en estos momentos solamente esta dejando selecciar los archivos, necesito que sean las carpetas