Stripe elements are showing errors after mounting

Describe the bug

I'm not sure how to describe it, but suddenly my Stripe form is loading the fields with an error state, as shown in the picture. What could be going wrong? The fields have never mounted in an error state before.

To Reproduce

this.stripe= Stripe(public_key);

this.elements = this.stripe.elements({
      clientSecret: client_secret,
      fonts: [
        {
          cssSrc: 'https://fonts.googleapis.com/css2?family=Roboto:wght@100;400;700;900'
        }
      ],
      appearance:{
        theme: 'stripe',
        rules : {
          '.Input': {
            borderRadius :'3px',
            height : '30px',
            boxShadow:'none',
            backgroundColor : '#f9f9f9',
            fontSize : '12px',
            fontFamily:'Roboto',
            color:'#222'
          },
          '.Input--invalid': {
            borderColor :'#b11657'
          },
          '.Input:hover': {
            borderColor :'#3acc00',
            boxShadow:'none'
          },
          '.Input:focus': {
            borderColor :'#3acc00',
            boxShadow:'none'
          },
          '.Label' : {
            fontSize : '12px',
            fontWeight:'bold',
            fontFamily:'Roboto',
            color: '#3f3f3f'
          }
        }
      }
    });

    this.elements.create("payment", {
      layout: "tabs",
    }).on('ready',() => {
    }).on('change',({complete}) => {
    }).mount("#stripe-container");

Expected behavior

I except the fields will load without error state!

Code snippets

No response

OS

Win

Node version

Node 18

Library version

15.6.0

API version

2024-06-20

Additional context