PayPal React Js buttons sometimes disappear

I am building a basic react integration, and I tested that buttons do work properly, except that about half of the time, they just simply disappear from the webpage after appearing briefly for 100ms or so

import React from 'react';
import "./website1.css"
//import { loadScript } from 'paypal-checkout';
import { PayPalScriptProvider, PayPalButtons, usePayPalScriptReducer } from "@paypal/react-paypal-js";
import { useEffect } from "react";


class Website1 extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      cartItems: []
    };
    this.addToCart = this.addToCart.bind(this);
    this.removeFromCart = this.removeFromCart.bind(this);
    this.handleEmptyCart = this.handleEmptyCart.bind(this);
  }


  addToCart(item) {
    this.setState(prevState => ({
      cartItems: [...prevState.cartItems, item]
    }));
  }

  handleEmptyCart() {
    this.setState({ cartItems: [] });
  }


  removeFromCart(index) {
    this.setState(prevState => {
      const newItems = [...prevState.cartItems];
      newItems.splice(index, 1);
      return { cartItems: newItems };
    });
  }

  render() {
    return (
      <div className="website1-container">
        <div className="products-container">
          <h2>Products</h2>
          <ul>
            <li>
              Product 1
              <button onClick={() => this.addToCart("Product 1")}>
                Add to cart
              </button>
            </li>
            <li>
              Product 2
              <button onClick={() => this.addToCart("Product 2")}>
                Add to cart
              </button>
            </li>
            <li>
              Product 3
              <button onClick={() => this.addToCart("Product 3")}>
                Add to cart
              </button>
            </li>
          </ul>
        </div>
        <div className="cart-panel">
          <h2>Shopping Cart</h2>
          <ul>
            {this.state.cartItems.map((item, index) => (
              <li key={index}>
                {item}
                <button onClick={() => this.removeFromCart(index)}>
                  Remove
                </button>
              </li>
            ))}
            {/* Check if the cart is not empty */}
            {this.state.cartItems.length > 0 && (
              <><button className="empty-cart-button" onClick={this.handleEmptyCart}>Empty Cart</button><div className="paypal-buttons-container" id="paypal-button-container">
                <PayPalScriptProvider
                  options={{
                    "client-id": "myid",
                    components: "buttons",
                    currency: "USD"
                  }}
                >
                  <ButtonWrapper
                    currency={currency}
                    showSpinner={true}
                  >
                  </ButtonWrapper>
                </PayPalScriptProvider>

              </div></>
            )}
          </ul>
        </div>
      </div>
    );
  }

}

export default Website1;
// This values are the props in the UI
const amount = "2";
const currency = "USD";
const style = { "layout": "vertical" };

// Custom component to wrap the PayPalButtons and handle currency changes
const ButtonWrapper = ({ currency, showSpinner }) => {
  // usePayPalScriptReducer can be use only inside children of PayPalScriptProviders
  // This is the main reason to wrap the PayPalButtons in a new component
  const [{ options, isPending }, dispatch] = usePayPalScriptReducer();

  useEffect(() => {
    dispatch({
      type: "resetOptions",
      value: {
        ...options,
        currency: currency,
      },
    });
  }, [currency, showSpinner]);


  return (<>
    {(showSpinner && isPending) && <div className="spinner"></div>}
    <p>Buttons go here</p>
    <PayPalButtons
      style={style}
      disabled={false}
      forceReRender={[amount, currency, style]}
      fundingSource={undefined}
      createOrder={(data, actions) => {
        return actions.order
          .create({
            purchase_units: [
              {
                amount: {
                  currency_code: currency,
                  value: amount,
                },
              },
            ],
          })
          .then((orderId) => {
            // Your code here after create the order
            return orderId;
          });
      }}
      onApprove={function (data, actions) {
        return actions.order.capture().then(function () {
          // Your code here after capture the order
        });
      }}
    />
  </>
  );
}

The backend works fine as far as I know

It’s using the server.js from standard-integration

import "dotenv/config"; // loads variables from .env file
import express from "express";
import * as paypal from "./paypal-api.js";
const { PORT = 3000 } = process.env;

const app = express();

app.use(express.static("public"));

// parse post params sent in body in json format
app.use(express.json());

app.post("/my-server/create-paypal-order", async (req, res) => {
  try {
    const order = await paypal.createOrder();
    res.json(order);
  } catch (err) {
    res.status(500).send(err.message);
  }
});

app.post("/my-server/capture-paypal-order", async (req, res) => {
  const { orderID } = req.body;
  try {
    const captureData = await paypal.capturePayment(orderID);
    res.json(captureData);
  } catch (err) {
    res.status(500).send(err.message);
  }
});

app.listen(PORT, () => {
  console.log(`Server listening at http://localhost:${PORT}/`);
});

Sometimes the buttons are there and sometimes they are not,

When they are not, the iframe just disappears

How can I debug this issue?