I have integrated Google Pay and Apple Pay using @stripe/react-stripe-js. Google Pay works as expected but for Apple Pay when a user clicks the Apple Pay button, the dialog box/pop appears with no “Confirm Payment” button and so you’re basically stuck there. There’s no button to confirm the payment or proceed.
I have been searching through the internet but haven’t found anything related to this. What am I doing wrong? Would really appreciate the help here.

Here’s my component for Stripe form:

import {Elements, useElements, useStripe} from '@stripe/react-stripe-js';
import {loadStripe} from '@stripe/stripe-js';
import StyledForm from '@/components/StyledForm/StyledForm';
import {PaymentElement} from '@stripe/react-stripe-js';
import {PaymentRequestButtonElement} from '@stripe/react-stripe-js';
import './paymentForm.scss';
import { useEffect, useState } from 'react';
import { LoadingOutlined } from '@ant-design/icons';
import { STRIPE_PUBLISH_KEY, STRIPE_SECRET_KEY } from '@/common/config/config';


const stripePromise = loadStripe(STRIPE_PUBLISH_KEY as string);

const PaymentForm = (props: any) => {
      return (
        <Elements stripe={stripePromise}>
            <CheckoutForm onSubmit={props?.onSubmit} />
        </Elements>
      )
    }
    
    const CheckoutForm = (props: any) => {
        const stripe: any = useStripe();
        const [paymentRequest, setPaymentRequest] = useState<any>(null);
      
        useEffect(() => {
          const price = localStorage.getItem('price') ?? 89;
          if (stripe) {
            const pr = stripe.paymentRequest({
              country: 'US',
              currency: 'usd',
              total: {
                label: 'LiProspect',
                amount: Number(price) * 100,
              },
              requestPayerName: true,
              requestPayerEmail: true,
            });
      
            // Check the availability of the Payment Request API.
            pr.canMakePayment().then((result: any) => {
                if (result) {
                  setPaymentRequest(pr);
                }
            });

            pr.on('paymentmethod', async (event: any) => {
              const result = await props?.onSubmit(false, event?.paymentMethod);
              if (!result) {
                event.complete('fail');
              } else {
                event.complete('success');
                console.log('paymentIntent success:', result);
              }
            });

            // pr.on('token', ( (event: any) => {
            //   console.log('token event', event);
            //   props?.onSubmit(false, event?.token)
            // }));
          }
          
          
        }, [stripe]);
      
        if (paymentRequest) {
          return (
            <>
              <PaymentRequestButtonElement options={{paymentRequest}}  />
            </>
          )
        }
      
        return <LoadingOutlined />;
      }

export default PaymentForm;