I learned firebase 8 and now the firebase 9 update is confusing me. i am trying to connect to cloud firestore but it always give me this error firebase_js__WEBPACK_IMPORTED_MODULE_9_.db.collection is not a function. already read the documentation but still cant figure out what is wrong.

    import React ,{useEffect, useState} from 'react';
import CheckoutProduct from './CheckoutProduct';
import "./Payment.css";
import {useStateValue} from "./StateProvider";
import {Link, useNavigate} from "react-router-dom";
import {CardElement, useStripe, useElements} from "@stripe/react-stripe-js";
import CurrencyFormat from 'react-currency-format';
import {getBasketTotal} from "./reducer";
import axios from "./axios";
import { collection, addDoc } from "firebase/firestore"; 
import {db} from "./firebase.js";



 const handleSubmit = async (event) => {
        // do all the fancy stripe stuff...
        event.preventDefault();
        setProcessing(true);

        const payload = await stripe.confirmCardPayment(clientSecret, {
            payment_method: {
                card: elements.getElement(CardElement)
            }
        }).then(({ paymentIntent }) => {
            // paymentIntent = payment confirmation

            setSucceeded(true);
            setError(null)
            setProcessing(false)



            db
              .collection('users')
              .doc(user?.uid)
              .collection('orders')
              .doc(paymentIntent.id)
              .set({
                  basket: basket,
                  amount: paymentIntent.amount,
                  created: paymentIntent.created
              })

            dispatch({
                type:'EMPTY_BASKET'
            })
            navigate('/orders', {replace :true})
        })

    }