cannot access the variable under same scope in javascript

I have written a code

(
      candidatesSubjectMapping,
      candidateIdsArray,
      emailHtmlTemplate,
      callback
    ) => {
      const EMAIL_BATCH_SIZE = 3;
      let counter = 0;
      let emailers = []
      let emailerPayload = {}

      for (let i = 0; i < candidateIdsArray.length; i++) {
        if (counter == EMAIL_BATCH_SIZE) {
          break;
        } else {
          const candidateId = candidateIdsArray[i];
          const candidateMissingSubjects =
            candidatesSubjectMapping[candidateId];

          candidateengagement.getCandidateInfo(candidateId, (err, result) => {
            if (err) callback(err);
            else {
              const candidateDetails = result[0];

              const seedResponse =  seedEmailers(
                candidateDetails,
                candidateMissingSubjects,
                emailHtmlTemplate
              );

              emailerPayload["replacements"] = seedResponse["replacements"]
              emailerPayload["emailObj"] = seedResponse["emailObj"]
        
              //   TODO : log activity
            }
          });

          console.log(emailerPayload);
          emailers.push(emailerPayload)

        //   emailers.push({ replacements: emailerPayload["replacements"],template:emailerPayload["emailObj"]});
          counter = counter + 1;
        }
      }
      callback(null,emailers);
    },

I am trying to access emailers array where I am pushing some payload ,the issue is here , I do not know what is happening here but emailers is always coming empty here and also the emailerPayload