Function keeps writing to firebase

Question

so I have this collection on firebase

db.collection("userEventsCal/"+currentUserUID+"/activities")

and this adds an event object to the activities document. like this:

const event = {
    Time: eventTime,
    start: eventTimeDate,
    title: eventName,
    allDay: true
    
}

const currentUserUID = fire.auth().currentUser.uid
const db = fire.firestore();

db.collection("userEventsCal/"+currentUserUID+"/activities").add({event})

My problem is that it keeps writing to firebase when I visit the events page.

const fetchGroupData = async () => {
        
        // I am going to fix this I just had to manipulate the string i know its bad I'll fix it
        const dateArray = eventDate.split(",");
        const day1 = dateArray[0];
        const day = day1.substring(0,3)
        const month1 = dateArray[1];
        const month2 = month1.split(" ");
        const date3 = month2[2];

        // final month
         const month3 = month2[1];
         const month = month3.substring(0,3);
        const year = dateArray[2];

        const newEventString = day + " " +  month + " " + date3 + year + " GMT+0100 (Irish Standard Time)";  
   

        const eventTimeDate = new Date(newEventString);
      
        const event = {
            Time: eventTime,
            start: eventTimeDate,
            title: eventName,
            allDay: true
            
        }
        allEvents.push(event)
      
        const currentUserUID = fire.auth().currentUser.uid
        const db = fire.firestore();
        
        db.collection("userEventsCal/"+currentUserUID+"/activities").add({event})

    }
        
  }    
      
    useEffect(() => {
        let mounted = false
        
        if(!mounted){
            fetchGroupData();
           
            }
                
                 return () => {
                     mounted = true
                 }
            
            }, [])

It keeps writing to firebase, how do I go about not adding an event when it already exists in the activites document.

The nested activities document looks like this with random doc.ids for each event:

It's basically adding multiple document id's for the same event

I have made a new collection and it is:

db.collection("userEventsCal4").doc(currentUserUID).collection(eventID).doc(currentUserUID).set({events: event})

in the page that I want to call it from, I don't ahve access to the eventID, so Im wondering if its possible to call just db.collection("userEventsCal4").doc(currentUserUID).get() to get everyrthing inside that collection?