useEffect: Can't perform a React state update on an unmounted component

Question

I have been developing an event registration website in React. Everything was good until I ran into this:

react-dom.development.js:67 Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

I am using Firebase to store content. And I don't know if it is because of the above warning or something else, but every time there is a render, there's a large number of reads from my collection in the database. I think for each time I refresh, the collection gets fully read again. What should happen is if it's initially making n reads, for a change it should make 1 read, but it is making n+1 reads (all the metadata also gets updated and read again), once resulting in max limit reads(50K) for me . Is there a fix?

My Home component:

import React,{useState,useEffect} from 'react';
import {deleteDoc, getDocs,collection,doc} from 'firebase/firestore';
import {db,auth} from '../firebasecode';

function Home({isAuth}) {
    const [postEvents,setPostEvents]=useState([]);
    const collectionRef=collection(db,"event_details");

    useEffect(() => {
        const getEvents=async ()=>{
            const data= await getDocs(collectionRef);
            console.log(data);
            setPostEvents(data.docs.map((doc)=>({
                ...doc.data(),
                id: doc.id
            })
            ));
        }

        getEvents();
    });

    const deleteEvent= async (id)=>{
        const postDoc=doc(db,"event_details",id);
        await deleteDoc(postDoc);
    };
    
    return (
        <div className="homePage">
            {postEvents.map((post)=>{
                return (
                <div className="post">
                    <div className="postTextContainer"><img className="imgmolder" src={post.eventimage}></img></div>
                    <div className="postHeader">
                        <div className="title"><h1>{post.eventname}</h1></div>
                        <div className="deletePost">
                        {isAuth && post.author_id === auth.currentUser.uid && 
                        (<button onClick={()=>{deleteEvent(post.id)}}>&#128465;</button>)}
                        </div>
                    </div>
                    <div className="postTextContainer">Eligibility criteria: {post.elig}</div>
                    <div className="postTextContainer">Team size: {post.teamsize}</div>
                    <div className="postTextContainer">Registration start:   {post.regstart}</div>
                    <div className="postTextContainer">Registration end:     {post.regend}</div>
                    <div className="postTextContainer">Competition start:    {post.compstart}</div>
                    <div className="postTextContainer">Competition end:      {post.compend}</div>
                    <div className="postTextContainer">Registration Fee:     Rs.{post.fee}</div>
                    <div className="postTextContainer">Mode: {post.mode}</div>
                    <div className="postTextContainer">Description: {post.description}</div>
                    <div className="postTextContainer"><a href={post.linkurl}>Registration link</a></div>
                    
                    <h3>@{post.author_name}</h3>
                  
                </div>);
            })}
        </div>
    );
}

export default Home;