Stripe integration with react and commerce.js giving error with 3DS

so i am using the stripe payment api for my ecommerce store that I built with commerce.js and react.

The stripe documentation says that the card 4242-4242-4242-4242 doesn't require authentication. ->

https://stripe.com/docs/payments/accept-a-payment-synchronously?platform=web#web-handle-next-actions

However when I am trying to pay with it on the test-mode it doesn't work and gives me the below error

Below is my code in react

export const Payment = ({checkoutToken,firstName,lastName,address,email,addressLine2,city,state,zip, onCaptureCheckout}) => {
  const stripePromise = loadStripe("pk_stripe_xxxyyy");

  
  const handleSubmit = async(event, elements, stripe) => {
       
        event.preventDefault()

        if(!stripe || !elements) return

        const cardElement = elements.getElement(CardElement)

        const {error, paymentMethod} = await stripe.createPaymentMethod({type: 'card', card: cardElement })

        if(error){
            console.log(error)
        } else{
            const orderData = {
                line_items: checkoutToken.line_items,
                customer: {firstname: firstName, lastname: lastName, email: email},
                shipping: { name: 'Primary', 
                            street: address, 
                            town_city: city,
                            county_state: 'NY',
                            postal_zip_code: zip,
                            country: 'US',  },
                fulfillment: {shipping_method: 'ship_gnZO5kn0mo7MNq'},
                payment: {
                    gateway: 'stripe',
                    stripe: {
                        payment_method_id: paymentMethod.id
                    }
                }
            }
           
            onCaptureCheckout(checkoutToken.id, orderData)
        }

       

  }

  return (
    <div className="pb-10">
      <h2 className="text-lg font-medium text-gray-900">Payment</h2>

     
      <Elements stripe={stripePromise}>
        <ElementsConsumer>
          {({ elements, stripe }) => (
            <form onSubmit={(e) => handleSubmit (e,elements,stripe)}>
              <CardElement className="py-8" />
              <button
                type="submit"
                className="w-2/3 block mx-auto bg-indigo-600 border border-transparent rounded-md shadow-sm py-3 px-4 text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-50 focus:ring-indigo-500"
                disabled ={!stripe}
              >
                Pay
              </button>
            </form>
          )}
          
        </ElementsConsumer>
      </Elements>
    </div>
  );
};
export default Payment;

Also below is a detailed view of the incomplete txn

I am quite sure 4242 card does not need authentication as i saw in a lot of youtube videos. Is it some thing with my setup? Please help

You should use an India-issued test card (e.g., 4000003560000008) to continue your integration. Using an International test card will trigger 3DS and not all test cards support 3DS.