for of loop continuing even on async/await even before the response

Question

Below is my code snippet which has async calls with await.

let reccData = [] 

for (const uniformId of uniformCollectionIds) {
     let watchCreatives = await CreativeCollection.findById(uniformId);

     if(watchCreatives.isActive){
             let recommendations = await ReccService.fetchReccSeries(watchCreatives.reccNo);
             if(recommendations){
                  reccData.push({reccNo:recommendations.reccNo, watchList:recommendations.watchListId,...})
             } 
     }
}

Logistics.insertMany(reccData).then(() => {
    //My other business logic goes here
 });

ReccService.ts

public fetchReccSeries = async (reccNo:number) => {
    let getRecc = await Recc.findByNumber(reccNo)
    if(getRecc){
      return getRecc 
    }
};

The problem with the above code is, even before i get the response from await ReccService.fetchReccSeries the for..of moves to the next iteration. Above is just a code snippet, and the reason i want it to execute in a sequential way is, a lot of counter/incremental logic is based on that.

What i tried

A .then({}) promise confirmation, but still the it behaves the same way.

Prepending await to for..of

for await (const uniformId of uniformCollectionIds) {

Trying Promise.All is out of my scope

What I'm expecting:

Until all the execution inside each iteration is not done, the next for iteration should not invoke