onSnapshotを使ったfirestoreの投稿を削除してしまうと、古い投稿が新たに表示されてしまう。

現在firebaseを使用して、簡易的なLINEのようなWebアプリを作成しています。
しかし、投稿を削除すると古い投稿が一番下に表示されてしまいます。
どなたかご教示していただけないでしょうか。

不要なコードはできるだけ削ぎ落としたつもりですが、長いコードになり読みづらくなって申し訳ありません。
尚、JavaScriptファイル内の firebaseConfig 変数の中身は変更しています。

HTML
1  <main id="message-area"></main>
2
3  <footer>
4    <textarea rows="5"></textarea>
5    <input type="submit" value="送信" />
6  </footer>
7
8  <script src="https://www.gstatic.com/firebasejs/7.2.3/firebase-app.js"></script>
9  <script src="https://www.gstatic.com/firebasejs/7.2.3/firebase-firestore.js"></script>
10
11　<script src="js/index.js"></script>

JavaScript
1// Your web app's Firebase configuration
2var firebaseConfig = {
3	apiKey: "hogehogehoge4nhAZnja30jjJS91O-xah-6xVwM",
4	authDomain: "hogehoge.firebaseapp.com",
5	databaseURL: "https://hogehoge.firebaseio.com",
6	projectId: "hogehoge",
7	storageBucket: "hogehoge.appspot.com",
8	messagingSenderId: "216169927064",
9	appId: "1:185169920000:web:a5c86895656b5dhogehoge",
10	measurementId: "G-HOGEHOGEHO"
11};
12// Initialize Firebase
13firebase.initializeApp(firebaseConfig);
14
15const db = firebase.firestore();
16
17const messageArea = document.getElementById('message-area');
18const textArea = document.querySelector('textarea');
19const submit = document.querySelector('input[type="submit"]');
20
21function scrollToEnd() {
22	messageArea.scrollTop = messageArea.scrollHeight;
23}
24
25submit.addEventListener('click', e => {
26	e.preventDefault();
27
28	if (textArea.value.length === 0) {
29		alert('文字が入力されていません');
30		return;
31	}
32
33	db.collection('message').doc().set({
34		text: textArea.value,
35		timestamp: firebase.firestore.FieldValue.serverTimestamp(),
36	}).then(() => {
37		const data = {text: textArea.value, timestamp: new Date()};
38		appendDOM(data);
39		scrollToEnd();
40	});
41});
42
43function appendDOM(data) {
44	const divContainer = document.createElement('div');
45	divContainer.className = 'container';
46	const pText = document.createElement('p');
47	pText.textContent = data.text;
48	data.timestamp = (0 + data.timestamp.getMonth()) + '月 ' + data.timestamp.getDate() + '日 ' + data.timestamp.getHours() + ':' + data.timestamp.getMinutes() + ':' + data.timestamp.getSeconds();
49	const pTimestamp = document.createElement('p');
50	pTimestamp.className = 'timestamp';
51	pTimestamp.textContent = data.timestamp;
52	const divLeftContainer = document.createElement('div');
53	divLeftContainer.className = 'left-container';
54	divLeftContainer.appendChild(pTimestamp);
55	divLeftContainer.appendChild(pText);
56
57	divContainer.appendChild(divLeftContainer);
58
59	const divDeleteButton = document.createElement('div');
60	divDeleteButton.className = 'delete button';
61	divDeleteButton.textContent = '削除';
62	divDeleteButton.addEventListener('click', () => {
63		db.collection('message').doc(data.id).delete().then(() => {
64			console.log('Document successfully deleted!');
65		});
66	});
67
68	divContainer.appendChild(divDeleteButton);
69
70	messageArea.appendChild(divContainer);
71}
72
73db.collection('message').orderBy('timestamp', 'desc').limit(5).onSnapshot(querySnapshot => {
74	const data = [];
75	for (let change of querySnapshot.docChanges()) {
76		if (change.type === 'added') {
77			const text = change.doc._document.proto.fields.text.stringValue;
78			const timestamp = new Date(change.doc._document.proto.fields.timestamp.timestampValue);
79			data.unshift({
80				text: text,
81				timestamp: timestamp,
82				id: change.doc.id,
83			});
84		}  // end if
85	}  // end for
86	
87	data.forEach(d => {
88		appendDOM(d);
89	});
90
91	scrollToEnd();
92});

CSS
1#message-area, footer {
2	padding: 1rem;
3}
4#message-area {
5	border: 1px solid #ccc;
6	height: 60vh;
7	overflow-y: scroll;
8	max-width: 640px;
9	margin: 0 auto;
10}
11footer {
12	position: fixed;
13	bottom: 0;
14	left: 0;
15	right: 0;
16	display: flex;
17	justify-content: space-between;
18	max-width: 640px;
19	margin: 0 auto;
20}
21textarea {
22	width: 70%;
23}
24input[type="submit"] {
25	width: 25%;
26}
27.left-container {
28	display: flex;
29}
30.container {
31	display: flex;
32	justify-content: space-around;
33	margin-bottom: .5rem;
34	padding-bottom: .5rem;
35	border-bottom: 1px solid #ccc;
36}
37.delete.button {
38	background-color: red;
39	color: #fff;
40	line-height: 3;
41	padding: 0 1rem;
42	cursor: pointer;
43}
44.delete.button:hover {
45	opacity: .6;
46}
47p.timestamp {
48	margin-right: 1rem;
49}