How to setState via Axios Post in React

using react and node, i'm writing a stripe payment processor to setState clientSecret via axios post request. the backend's returned result (ie value for clientSecret) is fine. my problem lies in the frontend: not being able to update the state despite being able to output the success message via console.log. i've written several renditions, but they boil down to two examples, neither of which work but which i've pasted below:

example1.js

..
constructor(props) {
    super(props);
    this.state = {
      clientSecret: ''
    };
  }

  async componentDidUpdate(prevProps) {
    if (this.props.cartItems !== prevProps.cartItems) {
      const data = {cart_items2: this.props.cartItems};
      var self = this;
      await axios.post('/create-payment-intent', data)
      .then(result => {
        console.log('Success in creating payment intent');
        self.result = result.data;
      })
      .catch(err => {
        console.log('Error in creating payment intent', err);
      })
      if(this.result) {
        this.setState({clientSecret: this.result.clientSecret}, () => { 
          console.log("this.state.clientSecret is", this.state.clientSecret);
        });
      }
    }
  }
..

example2.js

import PaymentForm from './PaymentForm.js';
import OrderSummary from './OrderSummary.js';
import { Elements, ElementsConsumer } from '@stripe/react-stripe-js';
import { loadStripe } from '@stripe/stripe-js';
import './checkout.css';
import axios from 'axios';
const React = require('react');

class Payment extends React.Component {
..
constructor(props) {
    super(props);
    this.state = {
      clientSecret: ''
    };
  }

  componentDidUpdate(prevProps) {
    if (this.props.cartItems !== prevProps.cartItems) {
      const data = {cart_items2: this.props.cartItems};
      axios.post('/create-payment-intent', data)
      .then(result => {
        if(result.data) {
          console.log('Success in creating payment intent');
          this.setState({clientSecret: result.data.clientSecret}, () => { 
          console.log("this.state.clientSecret is", this.state.clientSecret);
          });
        }
      })
      .catch(err => {
        console.log('Error in creating payment intent', err);
      })
    }
  }
..
render() {
    
    return (
      <div>
      <Elements stripe={stripePromise}>
      <ElementsConsumer>
      {({ stripe, elements }) => (
        <div class="row">
          <div class="column">
            <PaymentForm stripe={stripe} elements={elements}/>
          </div>
          <div class="column">
            <OrderSummary cartItems={this.props.cartItems}/>
          </div>
        </div>

      )}
      </ElementsConsumer>
      </Elements>
      </div>
    )
  }

}

export default Payment;