Google Pay incorrectly memoizing the return value of `createPaymentRequest`

[KalebMills]

Describe the bug

I am attempting to update the set total in the return of my createPaymentRequest function, but when testing, Google Pay shows the dollar value that the form was instantiated with.

This is problematic, because adding / removing items on the checkout page, or adding a tip does not update that value for Google Pay.

Here is my code block:

const Payment = ({ total, locationId, onNonceCreation }: { total: string, locationId: string, onNonceCreation: (nonce: string) => void; }) => {
    const paymentRequestFunc = useCallback(() => ({
        countryCode: "US",
        currencyCode: "USD",
        total: {
            amount: total,
            label: "Total"
        }
    }), [total])

    return (
        <div className='paymentContainer'>
            <PaymentForm
                applicationId={SQUARE_APP_ID}
                locationId={locationId}
                cardTokenizeResponseReceived={(token, buyer) => {
                    onNonceCreation(token.token!)
                }}
                createPaymentRequest={paymentRequestFunc}
            >
                <GooglePay />
                <br />
                <CreditCard />
            </PaymentForm>
        </div>
    )
}

Your Example Website or App

N/A

Steps to Reproduce the Bug or Issue

1. Instantiate the paymentRequestFunc with a prop value.
2. Attempt to change that value externally
3. Open with Google Pay
4. See that the value does not reflect the updated value

Expected behavior

I expect the dollar value in Google Pay to reflect the updated value.

Screenshots or Videos

You can see once I add a tip in my app, the total on the screen and the Google Pay totals are not matching.

Platform

• OS: [macOS]
• Browser: [Firefox]
• Version: [3.2.1]
• React Version: [18.0.21]

Additional context

No response