¡todo el mundo!

Estoy desarrollando una aplicación para una plataforma de comercio electrónico (VTEX), y en este momento me enfrento a un obstáculo sobre cómo completar un formulario con información de una llamada API. El código es el siguiente:

 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>("");

La llamada API ocurre en la función GetOrderInfo, pasando el order_id de los parámetros de URL. El código para esta función es:

 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; }

¿Cómo devuelvo la información de useEffect para usarla para transmitir el estado de los datos personales, de modo que la información se muestre en el formulario cuando el usuario finalmente la cargue?