Array output is different in console and when displayed on page

Question

I tired with the suggested answer, it is not working in my case.

I am fetching data from a database and storing it in arrays so I can sort the array values later.

But when I check the data from the sorted array in the console it is showing the right output but when I display it on the page it is not.

Basically the array arr stores data of one user and then I find the last element of the array and write 'update' to it.

But it is only showing 'update' to the second user's (last in Db) and writing 'update' to it.

How do I get the right output displayed on the page i.e. showing 'update' to each user's last entry?

(() => {
  setTimeout(() => {
    let arr = [];

    for (let email of userEmails) {
      docRef
        .where("emailInDb", "==", email)
        .get()
        .then((querySnapshot) => {
          querySnapshot.forEach((doc) => {
            let startDate = new Date(doc.data().dateInMills.at(-1) * 1000);

            // Adding data to the array
            arr.push({
              id: doc.id,
              email: doc.data().email,
              convertedDate: startDate,
            });
          });

          arr.sort((a, b) => {
            return a.convertedDate - b.convertedDate;
          });

          console.log(arr.at(-1)); // This is the correct output shown in console.

          dataOnPage.innerHTML = "";

          for (let data of arr) {
            let detailsOfUsers = `

                  <div class="flex flex-col justify-center align-middle tableRow">
                    <span>
                        <span class='name'>${data.name} </span>

                        <span class='email block text-[10px] text-gray-400 font-medium'>${
                          data.email
                        } </span>

                        <span class='updateStatus'>${
                          data === arr.at(-1) ? "udpate" : ""
                        } 
                         // Here it is only showing update for one record.

                        </span>
                    </span>                   
                  </div>
                `;
            dataOnPage.innerHTML += detailsOfUsers;
          }
        });
    }
  }, 1000);
})();