I have this Paypal buttons that are supposed to get amount to capture from the state.

```
state = {
    amount: 0,
  };

```

The state changes perfectly but the amount in the buttons remain the same i.e amount as `0` 

```
componentDidMount() {
      console.log(this.state.amount)
      let amount=this.state.amount;
      paypal
        .Buttons({
          createOrder: function (data, actions) {
            return actions.order.create({
              purchase_units: [
                {
                  amount: {
                    value: amount,
                  },
                },
              ],
            });
          },
          onError: function(err){
            console.log(err)
          }
        })
        .render("#paypal");
    }
  }

```

I tried putting the buttons in `componentDidUpdate` but this just renders the buttons repeatedly everytime the state changes

```
    componentDidUpdate(){
        console.log(this.state.amount)
paypal
        .Buttons({
          createOrder: function (data, actions) {
            return actions.order.create({
              purchase_units: [
                {
                  amount: {
                    value: amount,
                  },
                },
              ],
            });
          },
          onError: function(err){
            console.log(err)
          }
        })
        .render("#paypal");

      }

```

I get the Paypal buttons are being rendered when the component is mounted but how will the buttons receive the updated value from state