When I connect my firebase with React.js it returns an empty screen and does not retrieve data from database, previously it used to work on older ver

Question

Here is my code, the same code used to work with the older version of firebase but now as I try to connect my React.js app to retrieve data from the database, it returns an empty screen and the console does not show any error messsage

App.js:

import { useEffect, useState } from "react";
import "./App.css";
import Post from "./Post";
import {db} from "./firebase";

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

  useEffect(()=> {
    db.collection('posts').onSnapshot(snapshot => {
      
      setPosts(snapshot.docs.map(doc => doc.data() ))
    })

  }, []);


  
  return (
    <div className="app">
      <div className="app__header">
        <img
          className="app__headerImage"
          src="https://www.instagram.com/static/images/web/mobile_nav_type_logo.png/735145cfe0a4.png"
          alt=""
        />
      </div>
      


      {
        posts.map(post => (
          <Post username={post.username} caption={post.caption} imageUrl={post.imageUrl} />
        ))
      }
    </div>
  );
}

export default App;