Issue rendering mdbdatatable

I am attempting to use an mdbdatatable in an ASP.NET web page, using the following code:

 <div class="row mb-4">
        <div class="col-lg-12 text-center fs-3 fcDarkBlue">MANAGE MEMBER ACCOUNTS</div>
    </div>
    <div class="datatable" id="dtAccounts" data-mdb-striped="true" data-mdb-hover="true" data-mdb-loading="true" 
            data-mdb-color="#fcf3cf" data-mdb-loader-class="bg-success" data-mdb-border-color="dark" data-mdb-fixed-header="true" 
            data-mdb-max-width="100%" data-mdb-sm="true" data-mdb-full-pagination="true" data-mdb-selectable="true">
    </div>
<script>
    $(document).ready(function () {
        $("#btnExit").click(function () {
            sessionStorage.removeItem("CustomerID");
            document.location.href = 'home.aspx';
        });

        const formatCell = (cell, value) => {
            const parent = cell.parentNode
            parent.childNodes.forEach((child) => {
                child.classList.add('fs-6', 'blackText')
            })
        };

        const columns = [
            { label: 'Acct. #', field: 'AccountNo', format:formatCell },
            { label: 'Company', field: 'CompanyName', format: formatCell },
            { label: 'EIN', field: 'EIN', format: formatCell },
            { label: 'Balance', field: 'CurrentBalance', format: formatCell },
            { label: 'Credit Limit', field: 'CreditLimit', format: formatCell },
        ];

        const asyncTable = new mdb.Datatable(
            document.getElementById('dtAccounts'),
            { columns },
            { loading: true }
        );

        const customDataTable = document.getElementById("dtAccounts");
        customDataTable.addEventListener('rowSelected.mdb.datatable', (e) => {
            sessionStorage.setItem("AccountNo", e.selectedRows[0].AccountNo);
        })

        loadAccounts();

        function loadAccounts() {
            fetch('handlers/getaccountlist.ashx')
                .then((response) => response.json())
                .then((data) => {
                    asyncTable.update(
                        {
                            rows: data.map((companyaccount) => ({
                                ...companyaccount,
                                AccountNo: companyaccount.AccountNo,
                                CompanyName: companyaccount.CompanyName,
                                EIN: companyaccount.EIN,
                                Balance: '$' + companyaccount.CurrentBalance.toFixed(2),
                                CreditLimit: '$'+companyaccount.CreditLimit.toFixed(2),
                            })),
                        },
                        { loading: false }
                    );
                });
        };
    });
</script>

When I execute the code, I get the following error in the developer console of the browser, and even though the table finishes rendering, it does not process the entire script, so events are not being added and so forth. Here is the error I get:

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'add') at accounts.aspx:75:33 at NodeList.forEach () at Object.formatCell [as format] (accounts.aspx:74:31) at index.js:838:18 at Array.forEach () at index.js:832:13 at Array.forEach () at br._formatCells (index.js:827:10) at br._renderTable (index.js:790:10) at br._setup (index.js:557:10)

I do not know why this code throws this error and cannot find any other reference material to help. Thank you for your assistance!