stripe customer unkown even when customerId is supplied

I feel like there is something I'm not doing right here. So basically I made sure that customerId matched, but still after a payment was processed, it shows the customer as unkown.

Backend

    const user = await strapi.entityService.findOne(
      "plugin::users-permissions.user",
      ctx.state.user.id
    );

    if (user.stripeCustomerId == null) {
      const customer = await stripe.customers.create({ email: user.email });
      const result = await strapi.entityService.update(
        "plugin::users-permissions.user",
        ctx.state.user.id,
        {
          data: {
            stripeCustomerId: customer.id,
          },
        }
      );

      const ephemeralKey = await stripe.ephemeralKeys.create(
        { customer: customer.id },
        { apiVersion: "2024-06-20" }
      );

      const paymentIntent = await stripe.paymentIntents.create({
        amount: 4444,
        currency: "usd",
      });

      return {
        ephemeralKey: ephemeralKey.secret,
        paymentIntent: paymentIntent.client_secret,
        customerId: customer.id,
      };
    } else {
      const ephemeralKey = await stripe.ephemeralKeys.create(
        { customer: user.stripeCustomerId },
        { apiVersion: "2024-06-20" }
      );

      const paymentIntent = await stripe.paymentIntents.create({
        amount: 4444,
        currency: "usd",
      });

      return {
        ephemeralKey: ephemeralKey.secret,
        paymentIntent: paymentIntent.client_secret,
        customerId: user.stripeCustomerId,
      };
    }

Frontend

    const { initPaymentSheet, presentPaymentSheet } = useStripe();
    const { status, jwt } = useAuthStore();

    const proceedToOrder = () => {
        var config = {
            method: 'post',
            url: 'http://192.168.50.61:1337/api/orders/create-payment-intent',
            headers: {
                Authorization: `Bearer ${jwt}`,
            },
        };

        axios(config).then(async (response) => {
            const { error } = await initPaymentSheet({
                merchantDisplayName: 'Panda Eats',
                customerId: response.data.customerId,
                customerEphemeralKeySecret: response.data.ephemeralKey,
                paymentIntentClientSecret: response.data.paymentIntent,
                returnURL: 'stripe-example://stripe-redirect',
                // retrieve this from your server
            });
            if (error) {
                // handle error
            } else {
                presentPaymentSheet();
            }
        });
    };
    const { showAuthSheet } = useAuthSheet();
    const handleOrderNow = () => {
        if (status == 'authenticated') {
            proceedToOrder();
        } else {
            showAuthSheet();
        }
    };

Any help is much appreciated!

I tried to process a payment with stripe api generated client ID, I expect to see from stripe dashboard that the payment belongs to the generated customer, But instead the payment shows as a guest.

Your PaymentIntent should be created with the corresponding customer id

const paymentIntent = await stripe.paymentIntents.create({
   amount: 4444,
   currency: "usd",
   customer : customer.id
});

https://docs.stripe.com/api/payment_intents/create#create_payment_intent-customer