Why do I have to enter CVC each time when using direct integration on Google Pay with React?

Question

I'm using Google pay tokenizationSpecification type as DIRECT,and using the GooglePayButton from '@google-pay/button-react'.Whenever I click on Pay with Google button in a web application it asks for the CVC. Does anyone have an idea on the reason for this behavior?

`  tokenizationSpecification: {
        type: 'DIRECT',
        parameters: {
             protocolVersion: 'ECv2',
             publicKey:"YOUR_PUBLIC_KEY"
        }
   }`

This is the example code I've tried.

<GooglePayButton
  environment="TEST"
  buttonSizeMode="fill"
  paymentRequest={{
    apiVersion: 2,
    apiVersionMinor: 0,
    allowedPaymentMethods: [
      {
        type: "CARD",
        parameters: {
          allowedAuthMethods: ["PAN_ONLY", "CRYPTOGRAM_3DS"],
          allowedCardNetworks: ["MASTERCARD", "VISA"],
        },
        tokenizationSpecification: {
          type: "DIRECT",
          parameters: {
            protocolVersion: "ECv2",
            publicKey: "PUBLIC_KEY",
          },
        },
      },
    ],
    merchantInfo: {
      merchantId: "01234567890123456789",
      merchantName: "Demo Only (you will not be charged)",
    },
    transactionInfo: storeService.getTransactionInfo([cartItem]),
    shippingAddressRequired: true,
    shippingOptionRequired: true,
    shippingOptionParameters: storeService.getShippingOptionParameters(),
    callbackIntents: ["SHIPPING_ADDRESS", "SHIPPING_OPTION"],
  }}
  onLoadPaymentData={async (paymentData) => {
    console.log(paymentData);
  }}
  onPaymentDataChanged={(paymentData) => {
    return {
      newTransactionInfo: storeService.getTransactionInfo(
        [cartItem],
        paymentData.shippingAddress,
        paymentData.shippingOptionData,
      ),
    };
  }}
/>;

The below is where the payment modal was asked for the CVC