Why can't I fetch data from Firebase in my React.js app? (error: db.collection is not a function)

I desire to fetch data from my Firestore and display it in my React.js component. The problem is that every time I click on the button that is supposed to fetch data, I receive the following error:
Uncaught TypeError: db.collection is not a function (FetchedData.jsx:15).

Does anyone know why and how this can be fixed?
Thanks in advance!

Here is the component that:

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

const Fetch = () => {
  const [allDocs, setAllDocs] = useState([]);
  const [singleDoc, setSingleDoc] = useState({});
  // const db = firebase.firestore(); //-tak to powinno wyglądać, ale wywala błąd firebase.firestore() is not a function
  // const db = firebase.firestore();

  const fetchAll = (e) => {
    db.collection("f_Collections")
      .get()
      .then((snapshot) => {
        if (snapshot.docs.length > 0) {
          snapshot.docs.forEach((doc) => {
            setAllDocs((prev) => {
              return [...prev, doc.data()];
            });
          });
        }
      });
    console.log(allDocs);
  };

   return (
    <div className="">
      qwerty
      <button type="button" onClick={fetchAll} className="">
        Fetch
      </button>
    </div>
  );
};

export default Fetch;

Here is my Firebase config file

import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
import { getFirestore } from "firebase/firestore";
import "firebase/firestore";
import * as firebase from "firebase/app";

const firebaseConfig = {
  apiKey: "-",
  authDomain: "give-authorization.firebaseapp.com",
  projectId: "give-authorization",
  storageBucket: "give-authorization.appspot.com",
  messagingSenderId: "-",
  appId: "-"
};

const foundationsConfig = {
  apiKey: "-",
  authDomain: "give-foundationsorganization.firebaseapp.com",
  projectId: "give-foundationsorganization",
  storageBucket: "give-foundationsorganization.appspot.com",
  messagingSenderId: "-",
  databaseURL: "",
  appId: "-"
};
const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);

const foundationsApp = initializeApp(foundationsConfig, "foundations");
export const db = getFirestore(foundationsApp);

Impornant keys and API have been replaced with "-" but the sourcecode has actual data.

This is how you should initialize your both Firebase projects. Just make sure code below will be initialized somewhere before you can use components. I don't know react, but the best fit for code below is some plugin/extension that will be triggered before any components can be loaded.

import { initializeApp } from "firebase/app";

const firebaseConfig = {
  apiKey: "-",
  authDomain: "give-authorization.firebaseapp.com",
  projectId: "give-authorization",
  storageBucket: "give-authorization.appspot.com",
  messagingSenderId: "-",
  appId: "-"
};

const foundationsConfig = {
  apiKey: "-",
  authDomain: "give-foundationsorganization.firebaseapp.com",
  projectId: "give-foundationsorganization",
  storageBucket: "give-foundationsorganization.appspot.com",
  messagingSenderId: "-",
  databaseURL: "",
  appId: "-"
};
initializeApp(firebaseConfig);

initializeApp(foundationsConfig, "foundations");

And here how your component should look like.

import { useState, useEffect } from "react";
import { getDoc, doc, getFirestore, getApp } from "@firebase/firestore"

const Fetch = () => {
  const [allDocs, setAllDocs] = useState([]);
  const [singleDoc, setSingleDoc] = useState({});

  const fetchAll = async (e) => {
    const result = await getDoc(doc(getFirestore(getApp('foundations')), 'f_collections'))
    if(result.exists) {
        result.data.forEach(docSnap => {
            setAllDocs(prev => [...prev, docSnap.data()])
        })
    }
    console.log(allDocs);
  };

   return (
    <div className="">
      qwerty
      <button type="button" onClick={fetchAll} className="">
        Fetch
      </button>
    </div>
  );
};

export default Fetch;

This is how you should program using functional approach way, in Firebase V9.
Your console log was out of a .then scope. In my example, I made it using async/await way. Using this approach, you're removing a lot of "boilerplate code". If you use my code, it will have a result in allDocs variable. If you want to have result using your code, you need to move console.log(allDocs) inside .then method.