Load fetch response in variable before rendering Table element - ReactJS

I am fairly new to React and am attempting to fill a custom Table component with data from a variable that is retrieved through a fetch request. The problem is that the table component renders instantly, and it takes an extra second or two to finish the fetch request, and the table does not automatically update as the variable is updated.

Here is the code:

export default function AdminQueue() {
    const columns = [
        { path: "id",   name: "ID" },
        { path: "status", name: "Status" },
        { path: "date",  name: "Date" },
        { path: "submitter",   name: "Submitter" },
        { path: "action", name: "Action" },
        { path: "code",  name: "Code" },
    ];
    
    let data = [
        
    ];

    async function loadQueue() {
        const response = await fetch('http://localhost:8088/api/adminqueue/', {
            method: 'GET',
            credentials: 'include',
            mode: 'cors'
        });

        const json = await response.json();
        const queue = JSON.parse(json);

        for (var i = 0; i < queue.length; i++) {
            var j = queue[i];
            data.push({id: j["JobID"], status: j["Status"], date: j["Time"], submitter: j["Submitter"], action: j["Action"], code: j["Type"]})
            console.log(data);
        }
    }
    loadQueue();

    return (
        <div>
            <Table id="id" columns={columns} data={data} title="Admin Queue" />
        </div>
    );
}

If I remove the async from the loadQueue() function then the fetch doesn't work properly. Is there a simpler way to do what I'm attempting to do?

Thank you.

useState is used to define and update state variables within a React component. In this specific case, it is used to store the fetched data and update the component's state when the data is loaded.

useEffect is used to run a side effect, such as fetching data or updating the DOM, after the component is mounted. In this specific case, it is used to call the loadQueue function once when the component is mounted, which fetches the data and updates the component's state.

import { useState, useEffect } from 'react';
export default function AdminQueue() {
const columns = [
{ path: "id", name: "ID" },
{ path: "status", name: "Status" },
{ path: "date", name: "Date" },
{ path: "submitter", name: "Submitter" },
{ path: "action", name: "Action" },
{ path: "code", name: "Code" },
];
const [data, setData] = useState([]);
async function loadQueue() {
const response = await fetch('http://localhost:8088/api/adminqueue/', {
method: 'GET',
credentials: 'include',
mode: 'cors'
});
const json = await response.json();
const queue = JSON.parse(json);
const newData = queue.map(j => ({
id: j.JobID,
status: j.Status,
date: j.Time,
submitter: j.Submitter,
action: j.Action,
code: j.Type,
}));
setData(newData);
}
useEffect(() => {
loadQueue();
}, []);
return (
<div>
<Table id="id" columns={columns} data={data} title="Admin Queue" />
</div>
);
}