react paypal hosted field issue order is not in approved state

Question

Hi currently i am using react https://www.npmjs.com/package/@paypal/react-paypal-js -> hostedFields library but as specified in library doc i am using below code

1. i am creating an order from rest API(Backend side) using unirest

   .body("{\n "intent": "CAPTURE",\n "purchase_units": [\n {\n "amount": {\n "currency_code": "USD",\n "value": "100.00"\n }\n }\n ],\n "application_context": {\n "return_url": "https://abcd.com",\n "cancel_url": "https://abcd.com"\n }\n}")

2. then on capture time i am using below code and calling again backend api to capture amount but that is not working because order is not in approved state from below code.

    const submitHandler = () => {
        if (!typeof hostedFields.submit !== "function") return; // validate that `submit()` exists before using it
        hostedFields
            .submit({
                // The full name as shown in the card and billing address
                cardholderName: "John Wick",
            })
            .then((order) => {
                fetch(
                    "/your-server-side-integration-endpoint/capture-payment-info"
                )
                    .then((response) => response.json())
                    .then((data) => {
                        // Inside the data you can find all the information related to the payment
                    })
                    .catch((err) => {
                        // Handle any error
                    });
            });
    };
   

need to make an order status as approved inside step - 2. before calling backend(capture order)API. so, from backend i can capture an order