React function doesn't work when placed inside another function

In the frontend I've made 2 buttons, one to create the data from a form and another the GET and display it onto the frontend, this is all being sent and received from an API and it works just fine when I use two separate buttons. What I want to do is combine the two to function only when the create button is clicked; I've tried putting the getData function into the createData function but it never works and I keep on getting errors. How can I fix this?

Frontend.js

import React, { useState, useRef, useEffect } from 'react';
import axios from 'axios'
import './App.css';

function App() {
  const cardHolderRef = useRef("");
  const balanceRef = useRef("");
  const [cardHolder, setCardHolder] = useState("");
  const [cardNumber, setCardNumber] = useState("");
  const [balance, setBalance] = useState("");
  const [expDate, setExpDate] = useState("");
  const [cvc, setCvc] = useState("");


  async function getCardData() {
    await axios.get("http://localhost:5000/", { crossdomain: true })
      .then(response => {
        setCardHolder(response.data.data.name_on_card);
        setCardNumber(response.data.data.card_pan);
        setBalance(response.data.data.amount + "  " + response.data.data.currency);
        setExpDate(response.data.data.expiration);
        setCvc(response.data.data.cvv);
      })
  };

  async function createCardData(e) {
    e.preventDefault();
    await axios.post("http://localhost:5000/", {
      cardHolder: cardHolderRef.current.value,
      balance: balanceRef.current.value
    })

    getCardData();// This isn't working at all
  };

  return (
    <div>
      <div className='vcard'>
        <div className='theBalance'>
          <h2>{balance}</h2>
        </div>
        <div className='numNcvc'>
          <h2 className='theNum'>{cardNumber}</h2>
          <h2 className='theCvc'>{cvc}</h2>
        </div>
        <div className='expNholder'>
          <h2>Expiry Date<br/> {expDate}</h2>
          <h2>Card Holder<br/> {cardHolder}</h2>
        </div>
      </div>

      <div className='details-div'>
        <form className='details'>
          <input 
            placeholder='Name on Card' 
            type="text" 
            id='cardholder'
            name='cardholder'
            ref={cardHolderRef}></input>
          <input 
            placeholder='Amount (in USD)' 
            type="text"
            id="cardbalance"
            name="cardbalance"
            ref={balanceRef}></input>
          <input placeholder='MTN MoMo Number' type="text"></input>
        </form>
        <button className='createCardBtn' onClick={createCardData}>
          Create Card
        </button>
        <button className='createCardBtn' onClick={getCardData}>
          Get Card Data
        </button>
      </div>
    </div>
  );
}

export default App;

Backend.js

const { response } = require('express');
const express = require('express');
const cors = require('cors');
const app = express();

app.use(express.urlencoded({ extended: true }));
app.use(express.json());

const bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

const jsonParser = bodyParser.json();

const Flutterwave = require('flutterwave-node-v3');
const flw = new Flutterwave("FLWPUBK_TEST-63a79c5a6fe457d75a611b0f376e3e53-X", "FLWSECK_TEST-a6281194ef4ca095e794a1681fe32d69-X");

app.use(bodyParser.json());

app.use(function(req, res, next) {
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
    next();
  });

app.post("/", jsonParser, async (req, res) => {
    const cardHolder = req.body.cardHolder;
    const balance = req.body.balance;
    console.log(cardHolder);
    console.log(balance);

    // Payload: Flutterwave Card Details
    const payload = {
        "currency": "USD",
        "amount": balance,
        "billing_name": cardHolder,
        "billing_address": "2014 Forest Hills Drive",
        "billing_city": "React",
        "billing_state": "NY",
        "billing_postal_code": "000009",
        "billing_country": "US",
    }

    const createCardResponse = await flw.VirtualCard.create(payload);

    const newPayload = {
        "id": createCardResponse.data.id
    }

    const fetchResponse = await flw.VirtualCard.fetch(newPayload);
    console.log(fetchResponse);

    app.get('/', async (req, res) => {
        res.send(fetchResponse);
    })
});

app.use(bodyParser.json());

app.listen(5000, () => {console.log("Server started on port 5000")})

//createVcard();