配列のuseStateにonSnapshotで取得したデータの更新を行う方法について

React + TypeScript + Firebaseで簡易チャットのような物を練習で作成しています。
ルーム内でメッセージ一覧を表示させようと下記コードを設定したのですが、初回読み込み時は正常にメッセージ一覧を取得・表示しているのですが、メッセージ送信などで再レンダリングされるとレンダリングの数分メッセージ一覧が増えてしまいます。

希望としては、レンダリングされても常に最新のメッセージ一覧が表示されてほしいのですが、多重読み込みを防ぐ方法が調べてみても見つからず手詰まりの状態です。
お力添えいただけますと幸いです。

  useEffect((): void => {
    if (loginUser) {
      const queryMessage = query(messagecollectionRef, where("roomID", "==", roomID), orderBy("createdAt"));
      onSnapshot(queryMessage, (querySnapshot) => {
        querySnapshot.forEach((querySnapshotData: any) => {
          const userCollectionRef = doc(db, "users", querySnapshotData.data().userID);
          getDoc(userCollectionRef).then((userDocSnap: DocumentData | undefined) => {
            const setMessageDate = {
              messageText: querySnapshotData.data().texts,
              senderName: userDocSnap?.data().name,
            }
            setMessageList((prevValue) => [...prevValue, setMessageDate]);
          });
        });
      });
    }
  }, [loginUser, roomID]);