Hola a todos, hice una función js de reacción corta que se llama "ChartPage" que obtiene un valor de la función getCoin y luego pasa el valor al componente Chart que hice. Pero mi código, por alguna razón, no está esperando a que getCoin devuelva el valor y continúa en el código y llama a Chart con un valor 'indefinido'.
¿Alguien puede ayudarme a hacer que "ChartPage" espere hasta que las funciones getCoin devuelvan el valor que necesito pasar?
este es mi código:

 import React, { Component } from "react"; import "../../App.css"; import Chart from "../Chart"; import { Button } from "../Button.js"; import "./ChartPage.css"; import axios from "axios"; function getCoin(data) { var path = `/show-stocks/${data}`; axios.get(path).then((response) => { return response.data; }); } export default function ChartPage({ data }) { var values = getCoin(data); // "values" is the variable I want to pass to "Chart" return ( <> <div className="chart-page-container"> <h1>{data} Price Market Value</h1> <div className="chart-container"> <Chart data={values} /> {/* here I am passing "values" to "Chart" component*/} </div> <div className="chart-page-btns"> <Button link="/show-stocks/bitcoin" className="btns" buttonStyle="btn--outline2" buttonSize="btn--large2" > Bitcoin </Button> <Button link="/show-stocks/ethereum" className="btns" buttonStyle="btn--outline2" buttonSize="btn--large2" > Ethereum </Button> <Button link="/show-stocks/cardano" className="btns" buttonStyle="btn--outline2" buttonSize="btn--large2" > Cardano </Button> </div> </div> </> ); }