Обновление данных в firebase не работает внутри функции асинхронного дескриптора

Я работаю над приложением, в котором есть вкладка оплаты, когда я нажимаю на вкладку оплаты, я попадаю на страницу, на которой есть только одна кнопка, когда я нажимаю на эту кнопку, я попадаю в систему проверки полос (https://stripe.com/docs/payments/checkout/client) и после обработки платеж, он возвращает меня в приложение. У меня есть база данных в firebase, которая отслеживает, платит ли текущий вошедший в систему пользователь или нет. если текущий пользователь не оплачен, я хочу, чтобы поле членства в моей базе данных для этого пользователя было обновлено с «ложного» на «истинное» ПОСЛЕ того, как платеж был успешно завершен. Проблема в том, что если я обновлю базу данных сразу после того, как платеж будет выполнен внутри блока try, база данных не будет обновлена, но если я сделаю обновление внутри функции componentDidMount(), я увижу изменения, внесенные в базу данных. Что я делаю не так? проблема в том, что функция асинхронная? если я хочу обновить базу данных после успешной оплаты, как мне это сделать?

import React from 'react';
import firebase from "firebase/app";
import 'firebase/firestore';
import "firebase/database";
import { auth, database } from '../../firebase';

import { UserAndDbObjConsumer, UserAndDbObjContext } from '../../dbAndUserObjContext';

import { loadStripe } from '@stripe/stripe-js';
// Make sure to call `loadStripe` outside of a component’s render to avoid
// recreating the `Stripe` object on every render.

const stripePromise = loadStripe('test key here');

export default class Payment extends React.Component {
    static contextType = UserAndDbObjContext;

    constructor(props) {
        super(props);
        this.handleClick = this.handleClick.bind(this);
      }

    componentDidMount() {
        const {user, database} = this.context;

        // When i update my data below, it updates the firebase db and i can
        // see the changes taking effect
        // database.collection("userCollection").doc(user.uid).update({
        //   membership: true
        // })
      }

    handleClick = async (event) => {
        
        const {user, database} = this.context;

        console.log("i am inside handle but outside try")

        try {
          // When the customer clicks on the button, redirect them to Checkout.
          const stripe = await stripePromise;

          const { error } = await stripe.redirectToCheckout({
            lineItems: [{
              price: 'price_1IF4cPAt4f9zG3h2hTG64agQ', // Replace with the ID of your price
              quantity: 1,
            }],
            mode: 'payment',
            successUrl: 'https://app.guideanalytics.ca/',
            cancelUrl: 'https://guideanalytics.ca/termsofuse.html',
          });
          // If `redirectToCheckout` fails due to a browser or network
          // error, display the localized error message to your customer
          // using `error.message`.

          // When i update the firebase db here, than the changes on firebase dont take place
          database.collection("userCollection").doc(user.uid).update({
            membership: true
          })
        } 
        catch(e) {
          console.log(e);
        }
    }

    render() {
      return (
      <div> 
        <button role="link" onClick={(e) => this.handleClickTest()}>
          Checkout
        </button>
      </div>
      )
    }
  }

  //Payment.contextType = Context;