everyone!

I am developing an app for an ecommerce platform (VTEX), and right now I'm facing a roadblock on how to populate a form with info from an API Call. The code goes as follows:

import React, { useEffect, useState } from 'react';
import { useRuntime } from 'vtex.render-runtime';
import axios from 'axios';

import GetOrderInfo from './GetOrderInfo';

const Generate = () => {
  const { query } = useRuntime();
  const order_id = query!.order_id

  useEffect(() => {
    const order_data = GetOrderInfo(order_id);

    console.log(order_data);
  }, []);

  // State variables based on the form
  const [order_number, setOrderNumber] = useState<string>(`${order_id}`);
  const [personal_data, setPersonalData] = useState<string>("");

The API Call happens in the GetOrderInfo function, passing the order_id from the URL params. The code for this function is:

import axios from "axios"

const GetOrderInfo = async (_order_id: string) => {

    const options = {
        path: `/api/oms/pvt/orders/${_order_id}`,
        headers: {
            "X-VTEX-API-AppToken": process.env.APP_TOKEN,
            "X-VTEX-API-AppKey": process.env.APP_KEY,
            "X-Vtex-Use-Https": "true"
        }
    };

    const { data } = await axios({
        method: "GET",
        url: `${options.path}`,
        responseType: "json",
        headers: options.headers
    })

    return data;

}

How do I return info from the useEffect in order to use it to pass it on the state of personal_data, so the info will be displayed in the form when the user finally loads it?