dataTables fixedColumn part is not working

I am using DataTables version 1.10.18 and attempting to freeze the first column in the table. I have included the fixedColumns.js and the corresponding CSS files; however, the FixedColumns functionality is not working as expected. Upon checking the resources in the debug tools, both fixedColumns.js and CSS files appear to have been loaded successfully.

Please refer the below image
.

import {LightningElement,api} from 'lwc';
import dataTableResource from '@salesforce/resourceUrl/DataTableDemo';
import JqueryResource from '@salesforce/resourceUrl/jquery331';
import {
    loadScript,
    loadStyle
} from 'lightning/platformResourceLoader';
import {
    ShowToastEvent
} from 'lightning/platformShowToastEvent';
// import toast message event .

// import apex class and it's methods.
import getAccounts from '@salesforce/apex/LWCExampleController.getAccounts';


export default class SampleTable1 extends LightningElement {
    accounts = [];
    error;
    @api recordId;
    async connectedCallback() {
        await this.fetchAccoutns();

        Promise.all([
            loadScript(this, JqueryResource),
            loadScript(this, dataTableResource + '/DataTables-1.10.18/media/js/jquery.dataTables.min.js'),
            loadScript(this, dataTableResource + '/DataTables-1.10.18/extensions/FixedColumns/js/dataTables.fixedColumns.min.js'),
            loadScript(this, dataTableResource + '/DataTables-1.10.18/extensions/FixedColumns/js/fixedColumns.dataTables.js'),
            loadStyle(this, dataTableResource + '/DataTables-1.10.18/media/css/jquery.dataTables.min.css'),
            loadStyle(this, dataTableResource + '/DataTables-1.10.18/extensions/FixedColumns/css/fixedColumns.dataTables.css'),
        ]).then(() => {
            console.log('script loaded sucessfully');

            const table = this.template.querySelector('.tableClass');
            const columnNames = ['Spend Category', 'Spend Sub Category', 'Line Item Description', 'Calculation Description', 'NGO and ILP Discussion','Q1','Q2','Q3','Q4'];
            let tableHeaders = '<thead> <tr>';
            columnNames.forEach(header => {
                tableHeaders += '<th>' + header + '</th>';
            });
            tableHeaders += '</tr></thead>';
            table.innerHTML = tableHeaders;

            let jqTable = $(table).DataTable({
                fixedColumns: {
                    leftColumns: 1 // Fix the first column
                }
            });
            $('div.dataTables_filter input').addClass('slds-input');
            $('div.dataTables_filter input').css("marginBottom", "10px");

            this.accounts.forEach(rec => {
                let tableRows = [];
                //tableRows.push('<a href="/lightning/r/Account/' + rec.Id + '/view">' + rec.Name + '</a>');
                tableRows.push(rec.Spend_Category_T__c != undefined ? rec.Spend_Category_T__c : '');
                tableRows.push(rec.Spend_Sub_Category_T__c != undefined ? rec.Spend_Sub_Category_T__c : '');
                tableRows.push(rec.Line_Item_Description__c != undefined ? rec.Line_Item_Description__c : '');
                tableRows.push(rec.Calculation_Description__c != undefined ? rec.Calculation_Description__c : '');
                tableRows.push(rec.NGO_and_ILP_Discussion__c != undefined ? rec.NGO_and_ILP_Discussion__c : '');
                tableRows.push(rec.Q1__c != undefined ? rec.Q1__c : '');
                tableRows.push(rec.Q2__c != undefined ? rec.Q2__c : '');
                tableRows.push(rec.Q3__c != undefined ? rec.Q3__c : '');
                tableRows.push(rec.Q4__c != undefined ? rec.Q4__c : '');
                jqTable.row.add(tableRows);
            });
            jqTable.draw();

        }).catch(error => {
            this.error = error;
            console.log('error in loaded script',this.error)
            this.dispatchEvent(
                new ShowToastEvent({
                    title: 'Error!!',
                    message: JSON.stringify(error),
                    variant: 'error',
                }),
            );
        });
    }

    async fetchAccoutns() {
        await getAccounts()
            .then(data => {
                if (data) {
                    this.accounts = data;
                }
            })
            .catch(error => {
                this.error = error;
                this.accounts = undefined;
                this.error = 'Unknown error';
                if (Array.isArray(error.body)) {
                    this.error = error.body.map(e => e.message).join(', ');
                } else if (typeof error.body.message === 'string') {
                    this.error = error.body.message;
                }
                this.dispatchEvent(
                    new ShowToastEvent({
                        title: 'Error!!',
                        message: error,
                        variant: 'error',
                    }),
                );
            });
    }

}