User to User Direct Private Messaging Bug, Please Help

[4-Leafs-Code]

I just started working with firebase not even a month ago. I wrote this code in firebase v8 (hopefully). I've been working on this bug for about 2 weeks and I was wondering if anyone could please tell me what's wrong with it or that it's completely wrong and start over.
I'm trying to write an direct private messaging page like facebook messenger.

import { useEffect, useState } from "react";
import { IconButton } from "@mui/material";
import SendIcon from "@mui/icons-material/Send";
import ListItem from "@mui/material/ListItem";
import ListItemButton from "@mui/material/ListItemButton";
import ListItemText from "@mui/material/ListItemText";
import ListItemAvatar from "@mui/material/ListItemAvatar";
import Avatar from "@mui/material/Avatar";
import { useNavigate } from "react-router";
import { getUserAuth } from '../actions';
import { db } from "../firebase";

import {
  Container,
  Messengers,
  MessengersHeader,
  ActorsList,
  Messages,
  MessagesHeader,
  SelectedAct,
  AllActMessages,
  Reply,
  ReplyText,
} from "../styles/stylesMessaging";

export function Messaging() {
  const [users, setUsers] = useState([]);
  const [receiverData, setReceiverData] = useState(null);
  const [chatMessage, setChatMessage] = useState("");
  const [allMessages, setAllMessages] = useState([]);
  const user = getUserAuth();
  const navigate = useNavigate();

  useEffect(() => {
    db.collection("users").onSnapshot((snapshot) => {
      setUsers(
          snapshot.docs.map((doc) => ({
            userId: doc.id,
            username: doc.data().username,
          }))
      );
    });
  }, []);

  useEffect(() => {
    if (receiverData) {
      db.collection("users")
          .doc(receiverData.userId)
          .collection("messages")
          .doc(user.uid)
          .collection("messages")
          .orderBy("timestamp", "asc")
          .onSnapshot((snapshot) => {
            setAllMessages(
                snapshot.docs.map((doc) => ({
                  id: doc.id,
                  data: doc.data(),
                }))
            );
          });
    }
  }, [receiverData, user.uid]);
  
  const sendMessage = (e) => {
    e.preventDefault();
    db.collection("users")
        .doc(receiverData.userId)
        .collection("messages")
        .doc(user.uid)
        .collection("messages")
        .add({
          message: chatMessage,
          timestamp: db.firestore.FieldValue.serverTimestamp(),
          username: user.displayName,
        });

    db.collection("users")
        .doc(user.uid)
        .collection("messages")
        .doc(receiverData.userId)
        .collection("messages")
        .add({
          message: chatMessage,
          timestamp: db.firestore.FieldValue.serverTimestamp(),
          username: user.displayName,
        });
    setChatMessage("");
  };
  const UsersComponent = (props) => {
    const handleToggle = (username, userId) => {
      props.setReceiverData({
        username: username,
        userId: userId,
      });
      props.navigate(`/messaging/${userId}`);
    };

    return (
      <ActorsList>
        {props.users.map((user) => {
          return (
            <ListItem disablePadding key={user.id}>
              <ListItemButton
                onClick={() => handleToggle(user.username, user.id)}
                selected={props.receiverData.userId === user.id}
              >
                <ListItemAvatar>
                  <Avatar
                    alt="Remy Sharp"
                    src="https://material-ui.com/static/images/avatar/1.jpg"
                  />
                </ListItemAvatar>
                <ListItemText primary={user.username} />
              </ListItemButton>
            </ListItem>
          );
        })}
      </ActorsList>
    );
  }
  
  return (
    <Container>
      <Messengers>
        <MessengersHeader>
          <h1>Messengers</h1>
          <p>Need a search Bar</p>
        </MessengersHeader>
        <UsersComponent
          users={users}
          receiverData={receiverData}
          navigate={navigate}
          setReceiverData={setReceiverData}
        />
      </Messengers>
      <Messages>
        <MessagesHeader>
          <h1>Messages</h1>
        </MessagesHeader>
        <SelectedAct>
          <h3>{receiverData?.username}</h3>
        </SelectedAct>
        <AllActMessages>
          {allMessages.map((message) => {
            return (
              <div key={message.id}>
                <p>
                  <span>{message.data.username}</span> {message.data.message}
                </p>
              </div>
            );
          })}
        </AllActMessages>
        <Reply>
          <ReplyText
            value={chatMessage}
            onChange={(e) => setChatMessage(e.target.value)}
          />
          <IconButton
            color="primary"
            aria-label="upload picture"
            component="span"
            onClick={sendMessage}
          >
            <SendIcon />
          </IconButton>
        </Reply>
      </Messages>
    </Container>
  );
}

export default Messaging;

All of my other firebase related code, Ive had to write things like the snippit below but this code really starts throwing errors when I use it here.

const mapStateToProps = (state) => {
  return {
    loading: state.articleState.loading,
    user: state.userState.user,
    articles: state.articleState.articles,
  }
}
const mapDispatchToProps = (dispatch) => ({
  getArticles: () => dispatch(getArticlesAPI()),
})

export default connect(mapStateToProps, mapDispatchToProps) (Main);