Expected behavior

Working with the examples given in: https://mdbootstrap.com/docs/standard/data/datatables/#section-async-data

The async data function should work and not have any issues nor return that a function called in the docs is not a function with expected data formats.

Actual behavior

I have tried to get a single record from my database and display it in the data table to see if this is the right solution for my project. My project has been setup to return information in JSON format from the database, see app. A.

I am only using a subset of that data, in my app.js file is my data table code. I would greatly appreciate in knowing what I am doing wrong so I can stop getting: app.js:2202 Uncaught (in promise) TypeError: data.map is not a function and use the data table. See App B for my App.js

Resources (screenshots, code snippets etc.)

App A):

{
"id": 1,
"first_name": "Acolyte",
"last_name": "Support",
"preferred_name": null,
"phone": "(425) 610 - 7274",
"email": "helpdesk@pattisparadoxes.net",
"role_id": 1,
"role_name": "Super Admin",
"department_id": 1,
"user_department": "Acolyte Support",
"user_status": "Active",
"last_active": "2022-06-28",
"ls_id": 1,
"ls_name": "Audio",
"lic_id": 1,
"lic_name": "Admin",
"license_ends": "3000-01-01",
"updated_at": "2022-07-03T04:31:19.000000Z"

}

App B):

const columns = [
    {label: 'User ID', field: 'id'},
    {label: 'Phone', field: 'phone'},
    {label: 'Email', field: 'email'},
];
const asyncTable = new mdb.Datatable(
    document.getElementById('users-datatable'),
    { columns, }
);
fetch('/getUsers')
    .then((response) => response.json())
    .then((data) => {
        console.log(data);
        asyncTable.update(
            {
                rows: data.map((row) => ({
                    ...row,
                    id: row.id,
                    phone: row.phone,
                    email: row.email,
                })),
            },
            { loading: false }
        );
    });