I have a general idea of how promises work and understand it on simple cases but I am working on a project where its giving me a headache... My code looks like this:

export const getFilesFromZip = async (zipFile) => {
  var jsZip = JSZip();

  const files = [];

  try {
    const res = await jsZip.loadAsync(zipFile).then((zip) => {
      Object.keys(zip.files).forEach((filename) => {
        zip.files[filename].async("string").then((fileData) => {
          files.push(fileData);
          console.log(files.length);
        });
      });
    });
    console.log("I want this to be 3:", files.length);
  } catch (error) {
    throw error;
  }
};

Basically, I am passing in a .zip file to the function and trying to extract each individual file. The code is derived from here. The Zip file contains 3 files and the console prints out

I want this to be 3: 0
1
2
3

instead of

1
2
3
I want this to be 3: 3

This is where I am having trouble. I've been messing around with asyncs and awaits and tried several combinations of .then(), but I can't seem to get my log to print out the length of the files array after it is done being populated. Simple async awaits make sense to me like this which is also in my project and works as expected:

const send = async (files) => {
  let formData = new FormData();

  files.forEach((file) => {
    formData.append("files", file);
  });

  try {
    const res = await axios({
      method: "POST",
      url: baseUrl,
      data: formData,
      headers: {
        "Content-Type": "multipart/form-data",
      },
    });
    return res;
  } catch (error) {
    throw error;
  }
};

Both codes follow a similar structure. Any advice what I am misunderstanding? Thanks