firebase giving me an error that says “db.collection is not a function” [duplicate]

firebase-config.js

import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";

const firebaseConfig = {
  apiKey: import.meta.env.VITE_API_KEY,
  authDomain: import.meta.env.VITE_AUTH_DOMAIN,
  projectId: import.meta.env.VITE_PROJECT_ID,
  storageBucket: import.meta.env.VITE_STORAGE_BUCKET,
  messagingSenderId: import.meta.env.VITE_MESSAGING_SENDER_ID,
  appId: import.meta.env.VITE_APP_ID
};

const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

// Use named exports for better clarity and import flexibility
export { app, db };

authcontext.jsx
error is in the useEffect with const userDoc.

import { createContext, useContext, useEffect, useState } from 'react';
import { getAuth, onAuthStateChanged } from 'firebase/auth';
import  { db }  from '../utils/firebase-config'; // Assuming you have firestore imported from firebase-config

const AuthContext = createContext();

export const AuthProvider = ({ children }) => {
  const [user, setUser] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    const auth = getAuth();
    const unsubscribe = onAuthStateChanged(auth, async (userAuth) => {
      if (userAuth) {
        setUser(userAuth);

        // Read preferences from Firestore on login
        try {
          const userDoc = await db.collection('users').doc(userAuth.uid).get();
          const userData = userDoc.data();
          setUser((prevUser) => ({
            ...prevUser,
            preferences: userData?.preferences || {} // assuming preferences is an object
          }));
        } catch (error) {
          setError(error);
          console.error("Error fetching preferences:", error);
        }
      } else {
        setUser(null);
      }
    }, (error) => {
      setError(error);
      console.error("Auth error:", error);
    });

    return () => unsubscribe();
  }, []);

  // Function to save user preferences
  const savePreferences = async (preferences) => {
    try {
      await db.collection('users').doc(user.uid).set({
        preferences
      }, { merge: true });
      setUser((prevUser) => ({
        ...prevUser,
        preferences: {
          ...prevUser.preferences,
          ...preferences
        }
      }));
    } catch (error) {
      setError(error);
      console.error("Error saving preferences:", error);
    }
  };

  return (
    <AuthContext.Provider value={{ user, savePreferences, error }}>
      {children}
    </AuthContext.Provider>
  );
};

export const useAuth = () => useContext(AuthContext);

user preferences start out blank then once logged in you can go to the settings page and add to the given settings that are in the settings page.
it allows me to input and but when I hit the save button the console gives me an error with db.collection