Estoy intentando hacer un gráfico con datos que se obtienen de una API, pero un problema que tengo es que no he podido representar correctamente el gráfico debido a una llamada asíncrona que estoy haciendo para obtener los datos. Creo que el gráfico se está ejecutando antes de que se puedan completar los datos porque al cargar la ventana no aparece nada. Sin embargo, cuando probé valores de codificación duros en lugar de 'marcas de tiempo' y 'precios' en la variable de datos, el gráfico se representa de inmediato. ¿Alguien sabe cómo puedo formatear el resto del código para que el gráfico se muestre solo después de que se hayan llenado las matrices de marca de tiempo y precio?

 import { useEffect } from 'react'; import { Line } from 'react-chartjs-2'; const MarketAPI = require('market-api'); const Client = new MarketAPI(); function GRAPH(){ const timestamps = []; const prices = []; var getData = async() => { const fromTS = (Date.now() / 1000 | 0 ) - 86400; // 1D from current timestamp const toTS = Date.now() / 1000 | 0; // current timestamp let get = await Client.assets.fetchAssetHist('MSFT', { from: fromTS, to: toTS, }); for(let i = 0; i < get.data.prices.length; i++){ timestamps.push(get.data.prices[i].[0]); prices.push(get.data.prices[i].[1]); } console.log(timestamps); console.log(prices); } const data = { labels: timestamps, datasets: [ { data: prices, fill: true, backgroundColor: 'rgba(243, 230, 200, 0.2)', borderColor: 'rgba(243, 210, 18)', }, ], }; const options = { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } }, scales: { x: { grid: { display: false }, display:true }, y: { grid: { display: false }, display: false } }, elements: { point:{ radius: 0 } }, }; useEffect(()=>{ getData() },[]); return( <div> <Line data={data} options={options}/> </div> ); } function App() { return ( <GRAPH/> ); }