Propsの値を別のコンポーネントに引き渡しができない

Question

いつもお世話になっております

現在Youtubeの動画（2.02.56付近）を参考にSnapchatのWeb版をReactを利用し作成しています

その過程で、Propsの値を別のコンポーネントに引き継ぐことができずにいます

詳しい方がいればご教授いただけると幸いです

ーー起きている問題ーー
Chats.jsから「key, id, username, timestamp, imageUrl, read, profilePic」をChat.jsに引き渡しているはずなのですが、表示されません

現状の画像↓

目標の画像↓

firebaseの内部↓

ーー試したことーー
・キャッシュのクリア＝＞変化なし
・useEffect内のdbが上手く行っていない（処理が終了する前にステート更新されてるから空の配列のままかと）と予測して、Async awaitを使用＝＞変化なし

useEffect(() => {
    const f = async () => {
      await db.collection("posts")
        .orderBy("timestamp", "desc")
        .onSnapshot((snapshot) =>
          setPosts(
            snapshot.docs.map((doc) => ({
              id: doc.id,
              data: doc.data(),
            }))
          )
        );
    };
    f();
  }, []);

ーーコードーー

import { Avatar } from '@mui/material';
import React, { useEffect, useState } from 'react';
import './Chats.css';
import SearchIcon from '@mui/icons-material/Search';
import ChatBubble from '@mui/icons-material/ChatBubble';
import { db } from "./firebase";
import Chat from './Chat';

function Chats() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    db.collection("posts")
      .orderBy("timestamp", "desc")
      .onSnapshot((snapshot) =>
        setPosts(
          snapshot.docs.map((doc) => ({
            id: doc.id,
            data: doc.data(),
          }))
        ));
  }, []);

  return (
    <div className="chats">
      <div className="chats__header">
        <Avatar className="chats__avatar" />
        <div className="chats__search">
          <SearchIcon />
          <input placeholder="Friends" type="text" />
        </div>
        <ChatBubble className="chats__chatIcon" />
      </div>
      <div className="chats__posts">
        {posts.map(({
          id,
          data: { profilePic, username, timestamp, imageUrl, read },
        }) => (
          <Chat
            key={id}
            id={id}
            username={username}
            timestamp={timestamp}
            imageUrl={imageUrl}
            read={read}
            profilePic={profilePic}
          />
        ))}
      </div>
    </div>
  );
}

export default Chats

import React from 'react';
import './Chat.css';
import { Avatar } from '@mui/material';
import StopRoundedIcon from '@mui/icons-material/StopRounded';
import ReactTimeago from 'react-time-ago';

function Chat({ id, username, timestamp, read, imageUrl, profilePic }) {
  return (
    < div className="chat" >
      <Avatar className="chat__avatar" src={profilePic} />
      <div className="chat__info">
        <h4>{username}</h4>
        <p>
          Tap to view - {" "}
          <ReactTimeago date={new Date(timestamp?.toDate()).toUTCString()} />
        </p>
      </div>

      {!read && <StopRoundedIcon className="chat__readIcon" />}
    </div >
  )
}

export default Chat

ーーCSSのコードーー（可能性としてheightなどの大幅なズレがあるかと考え、確認しました）

.chats{
  position: relative;
  height: 400px;
  width: 250px;
}

.chats__header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 10px;
  padding-right: 10px;
  background-color: #059ee0;
  height: 50px; 
}

.chats__search > input{
  outline: none;
  background-color: transparent;
  border: none;
  font-size: 12px;
  flex: 1;
  color: white;
}

.chats__search > ::placeholder{
  color: white;
  opacity: 1;
}

.chats__posts{
  box-shadow: 1px -7px 7px -6px rgba(0, 0, 0, 0.44);
  height: 359px;
  margin-top: -9px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  background-color: white;
  overflow: scroll;
}

.chats__posts::-webkit-scrollbar{
  display: none;
}

/*hide scrallbar from edgr and firefox*/
.chats__posts{
  -ms-overflow-style: none; /*for Edge*/
  scrollbar-width: none;/*for firefox*/
}

.chats__avatar{
  height: 25px !important;
  width: 25px !important;
}

.chats__search{
display: flex;
align-items: center;
flex: 1;
padding-left: 8px;
}

.chat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px;
  border-bottom: 1px solid whitesmoke;
  cursor: pointer;
}

.chat__avatar {
  height: 35px !important;
  width: 35px !important;
}

.chat:hover {
  opacity: 0.8;
}

.chat__readIcon {
  color: red;
}

.chat__info {
  padding-left: 11px;
  flex: 1;
}

.chat__info > h4 {
  font-size: 11px;
  font-weight: 500;
}

.chat__infor > p {
  font-size: 9px;
}

Answer 1

Chats.js

useEffect(() => {
    //firebase grammaly has changed
    const f = async () => {
      const postsRef = db.collection('posts');
      const snapshot = await postsRef.get();
      //console.log(typeof snapshot)
      console.log(Object.keys(postsRef));
      let items = [];
      snapshot.forEach(doc => {
        items.push({ id: doc.id, data: doc.data() })
      });
      setPosts(items);
    }
    f();
  }, []);