firebaseのorderBy('created')が更新時に適応されない

前提・実現したいこと

firebaseのorderBy('created')を更新後も適応させたいです。更新時にも変わらず、送信時間順に表示させる方法をお教え頂きたいと思いこの質問をさせていただきました。何卒ご回答よろしくお願いします。

発生している問題・エラーメッセージ

firebaseで簡単なチャットを作成している途中にmessageと一緒にTimestampsを入れてorderBy('created')で順番に表示させるようにしたんですが、collection('users').doc(uid)のなかで管理されているuserNameを取得するためにmessageを作成したと同時にそのmessageを作成した人のuidも一緒に管理してそこのuidとcollection('users').doc(uid)を結びつける事でcollection('users').doc(uid)の中に管理されているuserNameを表示している仕組みを作成したのですが、message作成時はなんの問題のなくorderBy('created')によって順に表示されるのですが、リロードなどの更新後に時間順が適応されずにユーザーごとにmessageが送信時間関係なしに振り分けられてしまいます。

該当のソースコード

javascript
1
2 const db = firebase.firestore();
3  db.settings({
4    timestampsInSnapshots: true
5  });
6
7  
8  const collection = db.collection('chat');
9
10  const auth = firebase.auth();
11  let me = null;
12
13auth.onAuthStateChanged(user => {
14
15    if (user) {
16      me = user;
17
18
19      while (messages.firstChild) {
20        messages.removeChild(messages.firstChild);
21      }
22
23      collection.orderBy('created').onSnapshot(snapshot => {
24         snapshot.docChanges().forEach(async change => {
25          const myuid = user.uid
26          const uidData = change.doc.data().uid
27          const res = await db.collection('users').doc(uidData).get()
28          if (change.type === 'added') {
29            const li = document.createElement('li')
30            const d = change.doc.data()
31            if (res.exists) {
32              const userName = res.data().userName;
33              if ( d.uid != myuid) {
34                li.classList.add('your');
35                li.textContent = userName + ':' + d.message;
36              } else {
37                li.textContent = d.message + ':' + userName;
38              }
39             messages.appendChild(li);
40            }
41          }
42        });
43      },error => {});
44    }
45  });
46
47  const message = document.getElementById('message');
48  const form = document.querySelector('form');
49  const messages = document.getElementById('messages');
50  const page = document.getElementById('page');
51
52  form.addEventListener('submit', e => {
53    e.preventDefault();
54
55    const val = message.value.trim();
56    if (val === "") {
57      return;
58    }
59
60    message.value = '';
61    message.focus();
62
63      collection.add({
64        message: val,
65        created: firebase.firestore.FieldValue.serverTimestamp(),
66        uid: me ? me.uid : 'nobody'
67      })
68      .then(doc => {
69        console.log(`${doc.id} added!`);
70      })
71      .catch(error => {
72        console.log('document add error!');
73        console.log(error);
74    });
75  });