Button sometimes stays invisible when it should show up

The GooglePay react button sometimes doesn't render as visible on our staging/prod environment and I can't figure out why. What I know so far is:

• it never happens in dev environment,
• it happens when I navigate to the page that contains the button for the first time since displaying the page; when I navigate back and there again, it does display, same as when I hit refresh while on the page with the button - in that case it shows up correctly straight away,
• it's not 100% reliably reproducible, in fact sometimes it's a pain to replicate, while other times it happens almost every time,
• when I attached a debug log to onReadyToPayChange, I see that a working button triggers that handler once with isReadyToPay: true and isButtonVisible: true, but when the button doesn't render, it isn't triggered at all.

My question is: is this a bug, a race condition of some kind with loading dependencies, or am I not aware of some reason why the button would decide the user is not readyToPay? I'll paste my full config below, but note that existingPaymentMethodRequired is explicitly set to false.

const locale = useLocale()
return <GooglePayButton
      environment={APP_ENV === 'production' ? 'PRODUCTION' : 'TEST'}
      buttonType='pay'
      buttonColor={'white'}
      buttonRadius={6}
      buttonBorderType='no_border'
      buttonSizeMode='fill'
      style={{ width: '100%', height: '50px' }}
      buttonLocale={locale}
      onError={(error) => {
        console.error('[GPAY] error', error)
      }}
      onClick={onClick}
      onReadyToPayChange={(readyToPay) => {
        console.log('[GPAY] onReadyToPayChange', readyToPay)
      }}
      existingPaymentMethodRequired={false}
      paymentRequest={{
        apiVersion: 2,
        apiVersionMinor: 0,
        allowedPaymentMethods: [
          {
            type: 'CARD',
            parameters: {
              allowedAuthMethods: ['PAN_ONLY', 'CRYPTOGRAM_3DS'],
              allowedCardNetworks: ['MASTERCARD', 'VISA'],
            },
            tokenizationSpecification: {
              type: 'PAYMENT_GATEWAY',
              parameters: {
                gateway: 'payu',
                gatewayMerchantId: GATEWAY_MERCHANT_ID,
              },
            },
          },
        ],
        merchantInfo: {
          merchantId: GOOGLE_MERCHANT_ID || '12345678901234567890',
          merchantName: GOOGLE_MERCHANT_NAME || 'Demo Merchant',
        },
        transactionInfo: {
          totalPriceStatus: 'FINAL',
          totalPriceLabel: 'Total',
          totalPrice: amountNumber.toString(),
          CURRENCY_CODE,
          COUNTRY_CODE,
        },
      }}
      onLoadPaymentData={async (paymentRequest) => {
        [...]
      }}
    />

This question is related to:

• React component (@google-pay/button-react)
• Custom element (@google-pay/button-element)
• Angular component (@google-pay/button-angular)

Start at the @google-pay/button-react component and trace its first-navigation lifecycle around onReadyToPayChange, comparing the initial visit with back-navigation and refresh in staging or production. The issue names no source file or test; done means identifying the cause of the missing callback or invisible button and verifying visibility on the initial navigation.