Full Home.js Code

import React, { useEffect, useState } from "react";
import { getDocs, collection, deleteDoc, doc } from "firebase/firestore";
import { auth, db } from "../firebase";
import { withRouter } from "react-router-dom";
import { Link } from "react-router-dom";
import App from "../App";
import { Stack } from "@mui/material";
import { useNavigate } from "react-router-dom";

function Home({ isAuth }) {
  let navigate = useNavigate();
  const [postLists, setPostList] = useState([]);
  const postsCollectionRef = collection(db, "posts");

  useEffect(() => {
    const getPosts = async () => {
      const data = await getDocs(postsCollectionRef);
      setPostList(data.docs.map((doc) => ({ ...doc.data(), id: doc.id })));
    };

    getPosts();
  }, []);
  return postLists.map((post, key, index) => {
    return (
      <div className="App">
        {isAuth && post.author.id === auth.currentUser.uid && (

          <div className="post">
            <img className="postimage" src={post.link} />
          </div>

        )}
      </div>
    );
  });
}

export default Home;


App.css

.postimage{
  width: 100px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.post{
  width: 100%;
  display: flex;
  justify-content: center;
  flex-direction: row;
  align-items: center;
}