Thousands of Firestore database reads

I seem to have some bug in my code where one of my use effects seems to be running over and over although I put in a dependency array in each one. I must be missing something. Here is my code. I created variables that reference collections in firestore, then I am using those in my use effect hooks to pull the data.

const creditCollectionRef = collection(db, "credit");
const servicesCollectionRef = collection(db, "services");
const cashCollectionRef = collection(db, "cash");
const stocksCollectionRef = collection(db, "stocks");


useEffect(() => {
  const getCredit = async () => {
    const data = await getDocs(creditCollectionRef);
    setCreditAccounts(
      data.docs.map((doc) => ({
        ...doc.data(),
        id: doc.id
      }))
    );
  };

  getCredit();
}, [creditCollectionRef]);

useEffect(() => {
  const getCredit = async () => {
    const data = await getDocs(servicesCollectionRef);
    setServicesAccounts(
      data.docs.map((doc) => ({
        ...doc.data(),
        id: doc.id
      }))
    );
  };

  getCredit();
}, [servicesCollectionRef]);

useEffect(() => {
  const getCash = async () => {
    const data = await getDocs(cashCollectionRef);
    setCashAccounts(data.docs.map((doc) => ({
      ...doc.data(),
      id: doc.id
    })));
  };

  getCash();
}, [cashCollectionRef]);

useEffect(() => {
  const getStocks = async () => {
    const data = await getDocs(stocksCollectionRef);
    setStockAccounts(data.docs.map((doc) => ({
      ...doc.data(),
      id: doc.id
    })));
  };

  getStocks();
}, [stocksCollectionRef]);