How to get payment method id in stripe react native on the client side?

I'm trying to get paymentMethodId from the frontend part using the @stripe/stripe-react-native package. When I try to send this payment method id to the backend, It always responds

"error": "No such PaymentMethod: 'pm_1KXyV2SIMTNTi7PjZyzhziG2'"

Here's a JSON response of createPaymentMethod function.

Object {
  "AuBecsDebit": Object {
    "bsbNumber": null,
    "fingerprint": null,
    "last4": null,
  },
  "BacsDebit": Object {
    "fingerprint": null,
    "last4": null,
    "sortCode": null,
  },
  "Card": Object {
    "brand": "Visa",
    "country": "US",
    "expMonth": 4,
    "expYear": 2024,
    "fingerprint": null,
    "funding": "credit",
    "last4": "4242",
  },
  "Fpx": Object {
    "bank": "",
  },
  "Ideal": Object {
    "bankIdentifierCode": "",
    "bankName": "",
  },
  "SepaDebit": Object {
    "bankCode": null,
    "country": null,
    "fingerprint": null,
    "last4": null,
  },
  "Sofort": Object {
    "country": null,
  },
  "Upi": Object {
    "vpa": null,
  },
  "billingDetails": Object {
    "address": Object {
      "city": null,
      "country": null,
      "line1": null,
      "line2": null,
      "postalCode": null,
      "state": null,
    },
    "email": "DEMO2mwVTg@gmail.com",
    "name": "DEMO2mwVTg",
    "phone": null,
  },
  "customerId": null,
  "id": "pm_1KXylHSIMTNTi7PjuhvGrnqI",
  "livemode": false,
  "type": "Card",
}

This is my Payment Screen

const [cardDetails, setCardDetails] = useState({});
  const [loading, setLoadng] = useState(false);
  const { user } = useAuth();

  const handlePayment = async () => {
    setLoadng(true);
    try {
      const response = await createPaymentMethod({
        type: "Card",
        cvc: cardDetails.cvc,
        billingDetails: {
          email: user.email,
          name: user.username,
          customerId: "", //Created customer and passed the customer Id
        },
      })
        .then((result) => {
          if (result.error) {
            setLoadng(false);
            Alert.alert("Error", result.error.message);
          } else {
            setLoadng(false);
            console.log(result.paymentMethod);
          }
        })
        .catch((error) => {
          console.log(error);
        });
    } catch (err) {
      console.log(err.message);
    }
  };

return (
    <View style={{ padding: 20 }}>
      <CardField
        onCardChange={(card) => setCardDetails(card)}
        style={{ width: "100%", height: 100 }}
        postalCodeEnabled={false}
        autofocus={true}
      />
      <StripeButton
        variant="primary"
        loading={loading}
        title="Pay"
        disabled={!cardDetails.complete}
        onPress={() => handlePayment()}
      />
    </View>
  );

This is my Parent Payment Screen

const PaymentScreen = ({ paymentMethod, children }) => {
  const [loading, setLoading] = useState(true);

  const publishableKey = ""; //I've also added PK

  <StripeProvider publishableKey={publishableKey} urlScheme="sft.ch">
    <PaymentScreen />
  </StripeProvider>;
};