react-paypal-js中Hosted Fields挂载后立即卸载问题求助

我正在用react-paypal-js在个人作品集应用中集成PayPal支付功能，但遇到一个问题：Hosted Fields组件挂载后几乎立刻就卸载了，完全搞不懂原因。已经确认clientTokenResponse是有效的。

相关代码 #

PaymentsModal.tsx #

{isLoading ? (
  <FontAwesomeIcon
    icon={faSpinner}
    spin
    className="w-5 h-5 mx-auto my-5"
  />
) : errors.length > 0 ? (
  <p className="mx-auto my-5 text-sm">An error occurred </p>
) : clientTokenResponse ? (
  <PayPalScriptProvider
    options={{
      "client-id": process.env.REACT_APP_PAYPAL_CLIENT_ID!,
      components: "buttons,hosted-fields",
      "data-client-token": clientTokenResponse.client_token,
      intent: "capture",
      vault: false,
    }}
  >
    {selectingPaymentMethod === "credit-card" ? (
      <CreditCardInput />
    ) : (
      <PayPalInput />
    )}
  </PayPalScriptProvider>
) : (
  <FontAwesomeIcon
    icon={faSpinner}
    spin
    className="w-5 h-5 mx-auto my-5"
  />
)}

CreditCardInput.tsx #

export const CreditCardInput = () => {
  return (
    <PayPalHostedFieldsProvider
      createOrder={() => {
        return Promise.resolve("Test");
      }}
    >
      <p>
        卡号
        <span>*</span>
      </p>
      <PayPalHostedField
        id="card-number"
        className="card-field"
        hostedFieldType="number"
        options={{
          selector: "#card-number",
          placeholder: "4111 1111 1111 1111",
        }}
      />
      <p>
        CVV码<span>*</span>
      </p>
      <PayPalHostedField
        id="cvv"
        className="card-field"
        hostedFieldType="cvv"
        options={{
          selector: "#cvv",
          placeholder: "123",
          maskInput: true,
        }}
      />
      <p>
        有效期
        <span>*</span>
      </p>
      <PayPalHostedField
        id="expiration-date"
        className="card-field"
        hostedFieldType="expirationDate"
        options={{
          selector: "#expiration-date-field",
          placeholder: "MM/YYYY",
        }}
      />
      <SubmitPayment />
    </PayPalHostedFieldsProvider>
  );
};

官方文档提示 #

注意：在同一页面使用多个PayPal Hosted Fields实例时需谨慎。当任何选择器返回多个元素时，组件将无法渲染。

我还录制了8秒的视频展示该错误，也查看了官方的示例组件库尝试排查，但问题已经困扰我好几天了，恳请帮忙解决。

内容的提问来源于stack exchange，提问作者Amos Machora