Hay everyone, I made a short react js function that called "ChartPage" that gets a value from getCoin function and then passes the value to Chart component I made. But my code for some reason isn't waiting for getCoin to return the value and continues in the code and calls to Chart with an 'undefined' as the value.
Can someone help me make "ChartPage" waits until getCoin functions returns the value that I need to pass?
this is my code:

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