Does anyone know why my return() doesn't generate any HTML?

Question

Could someone explain to me what I'm doing wrong here? If I run a console.log after the if statement it still returns, but the return function does not display anything. I've tried a few things but I just can't figure out what I'm doing wrong. I've added the entirety of the code just to be sure.

import * as XLSX from 'xlsx'

export const readExcel = (file) => {

const promise = new Promise((resolve, reject) => {

    const fileReader = new FileReader();
    fileReader.readAsArrayBuffer(file)

    fileReader.onload = (e) => {
        const bufferArray = e.target.result;

        const wb = XLSX.read(bufferArray, { type: 'buffer' });

        const wsname = wb.SheetNames[0];

        const ws = wb.Sheets[wsname];

        const data = XLSX.utils.sheet_to_json(ws)

        function createHTML(data) {
            const testName = (data[0].testName)
            if (data.length > 0) {
                return (
                    <div>
                        <button id="testBoxTemplate" class="text-left hover:bg-gray-300 bg-white group relative rounded-lg overflow-hidden shadow-lg hover:shadow-2xl transform transition ease-in-out delay-50 hover:-translate-y-1 hover:scale-110 duration-200">
                            <div class="relative w-full h-80 md:h-64 lg:h-44"><img id="testBoxImage" class="w-full h-full object-center object-cover" src="" /></div>
                            <div class="px-3 py-4">
                                <h3 class="text-sm text-gray-500 pb-2 font-semibold">
                                    <a class="hidden bg-yellow-800 mx-1 py-1 px-2 text-white rounded-lg"> Brons </a>
                                    <a class="hidden bg-neutral-400 mx-1 p-1 py-1 px-2 text-white rounded-lg"> Zilver </a>
                                    <a class="hidden bg-yellow-500 mx-1 py-1 px-2 text-white rounded-lg"> Goud </a></h3>
                                <div id="testBoxTitle" class="text-base font-semibold text-gray-900 group-hover:text-indigo-600"> {testName} </div>
                            </div>
                        </button>
                    </div>
                )
            } else {
                console.log("No data found")
            }

        }

        resolve(data);
        createHTML(data);

    };

        fileReader.onerror = ((error) =>
            reject(error)
        )
    }
    )
    };
export default function Convert() {
    return (
        <div>
            <div className="flex justify-center items-center h-screen">
                <input className="form-control" type="file" id="input" accept=".xls, .xlsx" onChange={(e) => {
                    const file = e.target.files[0];
                    readExcel(file)
                }}></input>
            </div>
        </div>
    )

}


Convert();