Array element becomes undefined after asynchronous function call in JavaScript

Problem Description:
I’m encountering an issue where a specific element of my file array becomes undefined after using an asynchronous function to check the size of image files. Although all asynchronous processes complete successfully, attempting to access the array element results in undefined.
console.log(2${copyFile[i]}); return “2undefined”

Relevant Code:

 this.addFiles = async function (files)
    {
        let falseFiles = [];
        const copyFile = files;
        var dataGrid = self.dataGrid;
        for (let i = 0; i < copyFile.length; i++) {
            console.log(`1${copyFile[i]}`);
            const checkImageLimitFlag = await this.checkImageLimit(copyFile[i]);
            console.log(`2${copyFile[i]}`);
        }
    }

this.checkImageLimit = async function (file){
       let isValid = true;
        try {
            const maxWidth =1000;
            const maxHeight =1000;
            const { width, height } = await this.loadImage(file);
            // if(validExtension.includes(extension)){ 
                if(width > maxWidth || height > maxHeight)
                    isValid = false;
            // }
        } catch (error) {
        }
        return isValid
}

this.loadImage = function(file) {
        return new Promise((resolve, reject) => {
          const reader = new FileReader();
      
          reader.onload = function (e) {
            const img = new Image();
      
            img.onload = function () {
              resolve({ width: img.width, height: img.height });
            };
      
            img.onerror = reject;
            img.src = e.target.result;
          };
      
          reader.onerror = reject;
          reader.readAsDataURL(file);
        });
      }

Attempted Solutions:

I’ve reviewed the code to ensure the array is not modified within the asynchronous function.
Used console.log to check the state of the array before and after the asynchronous calls.
Tested to see if the same problem occurs in different browsers and environments.

Questions:

Why does an array element become undefined after a call to an asynchronous function using the await keyword?
Are there any possible approaches to solve this issue?