How do I alter the promises in my function to stop

Question

I need to maintain unique indexes for firestore transactions. I used "Passing information out of transactions" from https://firebase.google.com/docs/firestore/manage-data/transactions as a guide but have spent 11 hours today trying to get the generated index returned. It is a timing error I am sure but I cannot figure out how to fix it.

Console Log:

returned from call undefined   
eatery-menu.component.ts:200 index 0 event MatCheckboxChange {source: MatCheckbox, checked: true} result true
firebase.service.ts:28 Index= 86
firebase.service.ts:34 newIndex= 87

the eatery-menu.components initiates the call.

orderIndex() {
let db = this.firebase.firestore();
let sfDocRef = db.collection('eOrderIndex').doc('orderIndex');
db.runTransaction(function (transaction) {
  return transaction.get(sfDocRef).
    then(function (sfDoc) {
      if (!sfDoc.exists) {
        throw "Document does not exist!";
      }
      console.log("Index=", sfDoc.data().index);
      let newIndex =  sfDoc.data().index + 1;
      transaction.update(sfDocRef, { index: newIndex });
      return newIndex;
    })
}).then(function (newIndex) {
  console.log("newIndex=", newIndex);
  //return newIndex;       <- tried here 
}).catch(function (err) {
  console.log(err);
});
  //return newIndex;       <- tried here 
}

One of the things that confuse me is that 'return' is use for Promises and returning the result of the function. Sorry I should have put this up tomorrow as it is almost midnight here in Australia so I wont be able to respond until tomorrow morning.