Why does reading a non existing document from firestore return in a uncaught promise?

I have been trying to read and display the data from firestore, but console keeps logging some error message.

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'ex') Uncaught (in promise) TypeError: configs__WEBPACK_IMPORTED_MODULE_9_.db.ref is not a function

and my component renders multiple times on load. Can someone please help me figure out the issue?

import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";
import { getAuth, GoogleAuthProvider } from "firebase/auth";

const firebaseConfig = {
 
};
const app = initializeApp(firebaseConfig);

export const db = getFirestore(app);
export const auth = getAuth();

import { getAuth, onAuthStateChanged } from "firebase/auth";
import { doc, updateDoc, getDoc, arrayUnion,setDoc } from "firebase/firestore";
import { db } from "../configs"; 

export default function Ingredients() {
  const [form, setForm] = useState("");
  const auth = getAuth();
  const [imgArr, setImgArr] = useState([]);

   useEffect(() => {
      onAuthStateChanged(auth, (user) => {
        if (user) {
          const uid = auth.currentUser.uid;
          const docRef = doc(db, "users", uid);

          //loads the user's ingredients from firebase upon login
          const getUsers = async () => {
            const data = await getDoc(docRef);
            setImgArr(data.data().ingredients);
          };

          getUsers();
        } else {
          //clear the ingredients array upon logout
          setImgArr([]);
        }
      });

  }, [auth]);

  function handleChange(e) {
    e.preventDefault();
    setForm(e.target.value);
  }
  async function getResponse() {
    const params = new URLSearchParams({ q: form });
    const response = await fetch(
      `https://edamam-food-and-grocery-database.p.rapidapi.com/parser?ingr=${params}`,
      {
        method: "GET",
        
      }
    );

    const data = await response.json();

    return {
      label: data.parsed[0].food.label,
      image: data.parsed[0].food.image,
      id: Math.random(),
    };
  }
  //upload data to firebase and update the array of ingredients to display
  const clickHandler = async (e) => {
    try {
      setForm(e.target.value);
      //get response from edamam api
      const newImg = await getResponse();
      //redefining uid and docRef because unable to figure out how to make them global
      const uid = auth.currentUser.uid;
      const docRef = doc(db, "users", uid);
      //updates firebase with new ingredient
      updateDoc(docRef, {
        ingredients: arrayUnion({ name: form, image: newImg.image }),
      });
      setImgArr([...imgArr, newImg]);
    } catch (err) {
      console.error(err);
    }
  };
  return (
    <div className={`${styles.container} px-5`}>
   
      <Form
        label="Search Ingredients..."
        onChange={handleChange}
        value={form}
        placeholder="Search Ingredients..."
        clicked={clickHandler}
        icon={faCamera}
      />

      <div>{thingsElements}</div>
    </div>
  );