Error: Cannot read properties of undefined (reading 'id')

[ysng007]

https://github.com/chargebee/chargebee-checkout-samples/tree/master/components/react-app/src/components/example4

When I use this demo to build my components and use Authorizing payment with 3ds on submit, I first obtain the payment_intent from the back end, and then call authorizeWith3ds, but an internal error is reported, and I can't find the reason.

cosnt intent = {
        payment_intent : {
            "id": "Azz5ZgTWlGG3v2UPjRFUB67OReIMfjwml7Rc2LSvTVA6Y5a6C",
            "status": "inited",
            "currency_code": "USD",
            "amount": 50000,
            "gateway_account_id": "gw_AzqEWXTOpNbNPQ1X",
            "expires_at": 1677223245,
            "reference_id": "",
            "payment_method_type": "card",
            "success_url": "",
            "failure_url": "",
            "created_at": 1677221445,
            "modified_at": 1677221445,
            "resource_version": 0,
            "updated_at": 0,
            "customer_id": "",
            "gateway": "stripe",
            "active_payment_attempt": null,
            "business_entity_id": "",
            "object": "payment_intent"
        }
}

<CardComponent
              ref={this.cardRef}
              className="fieldset field"
              styles={style}
              classes={classes}
              locale={locale}
              placeholder={placeholder}
              fonts={fonts}
              currency={currency}
              onChange={this.onChange}
            >
              <div className="ex4-field">
                {/* Card number component */}
                <CardNumber
                  className="ex4-input"
                  onFocus={this.onFocus}
                  onBlur={this.onBlur}
                />
                <label className="ex4-label">Card Number</label>
                <i className="ex4-bar"></i>
              </div>

              <div className="ex4-fields">
                <div className="ex4-field">
                  {/* Card expiry component */}
                  <CardExpiry
                    className="ex4-input"
                    onFocus={this.onFocus}
                    onBlur={this.onBlur}
                  />
                  <label className="ex4-label">Expiry</label>
                  <i className="ex4-bar"></i>
                </div>

                <div className="ex4-field">
                  {/* Card cvv component */}
                  <CardCVV
                    className="ex4-input"
                    onFocus={this.onFocus}
                    onBlur={this.onBlur}
                  />
                  <label className="ex4-label">CVC</label>
                  <i className="ex4-bar"></i>
                </div>
              </div>
            </CardComponent>

this.cardRef.current
      .authorizeWith3ds(intent.payment_intent)
      .then((data) => {
        console.log('authorizeWith3ds', data)
        // this.setState({ loading: false, intent_id: data.id, error: '' })
      })
      .catch((error) => {
        console.log('error', error)
        this.setState({
          loading: false,
          intent_id: '',
          error: 'Problem while tokenizing your card details' + error
        })
      })

Error: Cannot read properties of undefined (reading 'id')