Uploading deeply nested folders

I am using JavaScript with react and I am trying to upload files and folders.

  const [files, setFiles] = useState([]);

  const handleDropFile = (event) => {
    event.preventDefault();
    const items = event.dataTransfer.items;
    const fileList = [];
    for (let i = 0; i < items.length; i++) {
      const entry = items[i].webkitGetAsEntry();
      if (entry.isFile) {
        fileList.push(new Promise((resolve) => entry.file(resolve)));
      } else if (entry.isDirectory) {
        fileList.push(traverseDirectory(entry, entry.name + "/"));
      }
    }
    Promise.all(fileList).then((files) => {
      console.log(files, files.flat())
      setFiles(files.flat());
    });
  };
  const traverseDirectory = (directory, currentPath) => {
    return new Promise((resolve) => {
      const reader = directory.createReader();
      const fileList = [];
      const readEntries = () => {
        reader.readEntries((entries) => {
          entries.forEach((entry) => {
            if (entry.isFile) {
              fileList.push(
                new Promise((resolve) =>
                  entry.file((file) => {
                    // Modify the file name here before resolving
                    const modifiedFile = new File(
                      [file],
                      currentPath + file.name,
                      { type: file.type }
                    );
                    resolve(modifiedFile);
                  })
                )
              );
            } else if (entry.isDirectory) {
              fileList.push(
                traverseDirectory(entry, currentPath + "/" + entry.name)
              );
            }
          });
          if (entries.length > 0) {
            readEntries();
          } else {
            resolve(Promise.all(fileList));
          }
        });
      };

<div onDrop={handleDropFile} >

However for folders that hold other folders I am I have encountered this error:
The files array will have arrays of files when it should only have file objects even tough I have called flat on it.

This is what console.log(files, files.flat()) prints:

[File, Array(2), Array(2), File]
[File, File, File, Array(1), File, File]

I suspect the problem comes from deeply nested promises but I am a beginner and I cannot solve the issue.