How to write data firestore database with document as user.uid as the doc id Firebase Modular 9

Question

I am trying to post data after user payment went through to the database but all I get is an empty database document with no error at all on the front-end. Below codes are firebase-firestore rules and my payment Component Code.

My Payment Component code

import { CardElement, useElements, useStripe } from "@stripe/react-stripe-js";
import React, { useEffect, useState } from "react";
import CurrencyFormat from "react-currency-format";
import { Link, useNavigate } from "react-router-dom";
import { instance } from "../../axios";
import { useStateValue } from "../context/StateProvider";
import { getBasketTotal } from "../reducers/reducer";
import CheckOutProduct from "./CheckOutProduct";
import CircularProgress from "@mui/material/CircularProgress";
import "./payment.css";
import { setDoc, doc} from "firebase/firestore";
import { database } from "../config/firebaseConfig";
import { Alert } from "@mui/material";

  

      const Payment = () => {
      const [{ basket, user }, dispatch] = useStateValue();
      const stripe = useStripe();
      const elements = useElements();
      const history = useNavigate();
    
      const [succeded, setSucceded] = useState(false);
      const [processing, setProcessing] = useState("");
      const [error, setError] = useState(null);
      const [disable, setDisable] = useState(true);
      const [clientSecret, setclientSecret] = useState("");
            
      const handleCardsubmit = async (e) => {
        e.preventDefault();
        // submits users requests
        setProcessing(true);
        const payload = await stripe
        
        .confirmCardPayment(clientSecret, {
            payment_method: {
              card: elements.getElement(CardElement),
            },
          })
          .then(({ paymentIntent }) => {
            // paymentIntent is payment confirmation
            const dbRef = doc(database, "orders", user?.uid);
            setDoc(dbRef, {
              amount:paymentIntent.amount,
              basket:basket,
              createdAt:paymentIntent.created
            })     
            setError(null);
            setSucceded(true);
            setProcessing(false);
            dispatch({
              type: "EMPTY_BASKET",
            });
    
            history("/orders");
          }).catch((error) => {
    
          });
        return payload;
      };

My Firebase firestore rules code

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /orders/{userId}/{document=**} {
      allow read, write, create: if request.auth.uid == userId;
    }
  }
}