Javascript – Post Count not updating in firebase react

So I have this react and firebase blog app. I want to show the count of the post of every user on the account page, which should look like this:

My code looks like this:

const [user, loading] = useAuthState(auth);

  const [posts, setPosts] = useState([])

  const postRef = collection(db, "posts")

  useEffect(() => {
    if(user){
      const userName = user.email
      const getPost = async () => {
        const q = query(postRef, where("author_email", "==", userName));
        const data = await getDocs(q)
    
        setPosts(data.docs.map((doc) => ({
          ...doc.data(),
          id: doc.id
        })));
      };
      getPost();
  }}, []);  

I imported following things:

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import React from 'react'
import { useAuthState } from 'react-firebase-hooks/auth'
import { faGoogle } from '@fortawesome/free-brands-svg-icons'
import { useState, useEffect } from 'react'
import { collection, getDocs, query, where } from 'firebase/firestore'
import { db } from '../firebase'

I am currently having an issue that it updates if I change the code, but not if I refresh the page.

The counter should be update realtime and always if I refresh