input.js Error When Displayed Inside Data Table

Expected behavior

Javascript for input controls within data table cells should render just as it does elsewhere without error.

Actual behavior

When input controls that are contained within data tables get focus, the below error occurs and the input control's outline and label does not render properly.

    Uncaught TypeError: Cannot read property 'style' of null
        at t.value (input.js:150)
        at t.value (input.js:187)
        at t.value (input.js:163)
        at HTMLInputElement.<anonymous> (input.js:201)
        at HTMLDocument.e (event-handler.js:120)

Resources (screenshots, code snippets etc.)

Javascript:

    const columns = [
        { label: 'Tool Type ID', field: 'toolTypeID', width: 0, editable: false },
        { label: 'Tool Type', field: 'toolTypeName' },
        { label: 'Is Approved', field: 'isApproved', inputType: 'checkbox' },
        { label: 'Submitted By', field: 'approvingUser' },
        { label: 'Approved By', field: 'submittingUser' },
        { label: 'Error', field: 'error' }
    ];
    const asyncTable = new mdb.Datatable(
        document.getElementById('datatable'),
        {
            columns: columns,
        },
        {
            loading: true,
            hover: true,
            sm: true,
            fullPagination: true,
            fixedHeader: true
        }
    );

    const loadData = () => {
        fetch('ToolTypes/GetToolTypes')
            .then((response) => response.json())
            .then((data) => {
                asyncTable.update(
                    {
                        rows: data.map((toolTypes) => ({
                            toolTypeID: toolTypes.toolTypeID,
                            toolTypeName: toolTypes.toolTypeName,
                            isApproved: toolTypes.isApproved,
                            approvingUser: toolTypes.approvingUser.userName,
                            submittingUser: toolTypes.submittingUser.userName,
                            error: '<div class="form-outline"> <input type="text" id="test" class="form-control" required /> <label class="form-label" for="test" + name">Test</label> </div>'
                        })),
                    },
                    { loading: false }
                );
            });
    };