I created a app on Nextjs (js) and Firebase. And I added Stripe extension to make a subscription system. I'm not very experienced with this new version 9 of firebase so it was hard to do this because I followed a tutorial that using version 8 and ts. I still managed to make most of the things work except this that is giving me this error.

This is the tutorial: https://youtu.be/P0Udy2Gi7n8?t=859 (my problem at 14:19)

I'm having the error here:

import getStripe from "./initializeStripe";
import { db } from '../firebase/firebaseClient'
import { doc, getDoc, addDoc, setDoc, setCol, onSnapshot, collection } from "firebase/firestore";

export async function createCheckoutSession(uid) {

    const docData = {
        price: "price_1KvNgoI6qyGEmrlgKU3miVmT",
        success_url: window.location.origin,
        cancel_url: window.location.origin,
    };
  
    const checkoutSessionRef = await setDoc(collection(db, "users", uid, "checkout_sessions"), docData); //ERROR


    onSnapshot(getDoc(doc(checkoutSessionRef)), (snap) => {
        const { sessionId } = snap.data();

        if (sessionId) {
            // We have a session, let's redirect to checkout
            // Init Stripe
            const stripe = getStripe();
            stripe.redirectToCheckout({ sessionId })
        }
    });

The error is the following:

Unhandled Runtime Error FirebaseError: Expected type 'mc', but it was: a custom yc object

Browser

Firebase config