@paypal/react-paypal-js - Getting INVALID_RESOURCE_ID error

Question

I'm integrating Paypal into an application and I'm using the @paypal/react-paypal-js package. I first first create an order on the backend (route: /create-paypal-order) and then capture the payment on another route (route: /capture-paypal-payment). When I test over Postman/Swagger and programmatically submitting a form I have in the application over a custom button, everything works, the entire process goes smoothly and I can see the funds transferred in the sandbox accounts. However, when I include the PayPalScriptProvider and the PayPal button from the library, the moment I click on the button I get the error 'INVALID_RESOURCE_ID' and a really long stack trace. Now I know that the client-id has to be correct, I've tested it, so I assume the problem is somewhere in my component.

This is the script provider that wraps the App (I've provided a dummy client-id here):

<PayPalScriptProvider
            options={{
                'client-id': 'Cg132XmuWDL0ugY_liC8FCfQCwbcjS93SrftdEPIUvnVoVDMIf_ZyZ2tTmHgU11bpLx6wjPz8hV3t2rJ',
            }}
        >
       <AppContainer>
          <App />
        </AppContainer>
</PayPalScriptProvider>

This is the PayPal button:

<PayPalButtons
     style={{ color: 'blue', height: 55, layout: 'horizontal' }}
     createOrder={createPaypalOrder}
     onApprove={capturePaypalPayment}
 />

This is the createPaypalOrder function (shortened only to include relevant code - I assume I don't even need the data/actions arguments if I'm calling the backend? if true, I couldn't find that piece of information anywhere online):

const createPaypalOrder = async (data: CreateOrderData, actions: CreateOrderActions) => {
        const response = await subscriptionService.createPaypalOrder(order);  
        setPaypalOrderId(response.result.id);
        return response.result.id
}

And the capturePaypalPayment function - which never even gets executed because the previous function throws the INVALID_RESOURCE_ID error:

const capturePaypalPayment = async (data: OnApproveData, actions: OnApproveActions) => {
            const response = await subscriptionService.capturePaypalPayment(paypalOrderId); 
    };

Just to reiterate once more, everything works when I, for instance, create a button of my own, put an onClick on it, call the first function when the button is clicked, open a popup window for the sandbox user to approve the payment and then capture the payment. The reason I'm not using that approach is because there is no way for me to know exactly when the user has approved the purchase (the dummy implementation just uses a 30sec timeout before the second request). But the paypal button implementation fails instantly.

If anyone can help, that would be greatly appreciated. Thanks in advance.

(On a different note, I just want to say I've tried to implement a different approach using the React example from the Paypal docs, but that doesn't even compile because I can't access the driver in the window.paypal.Buttons object.)

EDIT: This is what the response I get from the backend for the /create-paypal-order route looks like:

{
  "result": {
    "id": "5NP82422M70278020",
    "status": "CREATED",
    "links": [
      {
        "href": "https://api.sandbox.paypal.com/v2/checkout/orders/5NP82422M70278020",
        "rel": "self",
        "method": "GET"
      },
      {
        "href": "https://www.sandbox.paypal.com/checkoutnow?token=5NP82422M70278020",
        "rel": "approve",
        "method": "GET"
      },
      {
        "href": "https://api.sandbox.paypal.com/v2/checkout/orders/5NP82422M70278020",
        "rel": "update",
        "method": "PATCH"
      },
      {
        "href": "https://api.sandbox.paypal.com/v2/checkout/orders/5NP82422M70278020/capture",
        "rel": "capture",
        "method": "POST"
      }
    ]
  },
  "errors": []

EDIT 2:

Image of the errors