multiple pages in jspdf-autotable

Question

I have used jspdf and jspdfAutoTable in my code to generate pdf.

It works fine on a single page, with upto 23 rows. As soon as I add 24th row (i.e the row to be present on second page), everything is distorted.

page-1 pdf screenshot

I have used below code to generate the PDF

generatePdf(){
        const { jsPDF } = window.jspdf;
        const { jsPDFAutotable } = window.jspdfautotable;
        const doc = new jsPDF('landscape');//
        
        var totalPagesExp = doc.internal.getNumberOfPages();// '{total_pages_count_string}' ==> the output becomes Page 1 of '{total_pages_count_string}' and page 2 of '{total_pages_count_string}'
        
        let head = [['ID', 'Country', 'Rank', 'Capital', 'Name', 'TelephoneNumber', 'Email', 'SomeText']];
        let body = [
          [1, 'Denmark', 7.526, 'Cp', 'Alex', 9876543.210123456789, 'alex@example.com', 'a!£$%^&*()~#¬,.<>?asdfgQWERTY@asdfgh11222333344444'],
          .
          .
          .
          [23, 'Iceland', 7.501, 'Reykjavík', 'John', 2321, 'john@example.com', 'asdfgQWERTY'],
          
        ];

        doc.autoTable({ 
            head: head, 
            body: body,
            tableWidth: 'auto',
            styles: {
                cellWidth: 'wrap',
                fontSize: 8
            },
            columnStyles: {
                ID: {cellWidth: 'auto'},
                Country: {cellWidth: 'auto'},
                Rank: {cellWidth: 'auto'}
            },
            theme: 'striped', 
            pageBreak: 'auto', 
            showHead: 'everyPage', 
            showFoot: 'everyPage', 
            margin: { top: 30 },
            didDrawPage: function (data) {
                doc.setFontSize(20);
                doc.setTextColor(40);
                //doc.setFontStyle('normal');
                doc.text("Equipment Out On Jobs", 14, 22);
                
                doc.setFontSize(20);
                doc.setTextColor(40);
                //doc.setFontStyle('normal');
                doc.text("Job Numbers: 104319419,104319136", 14, 30);
                
                // Footer
                var str = "Page " + doc.internal.getCurrentPageInfo().pageNumber;
                // Total page number plugin only available in jspdf v1.0+
                if (typeof doc.putTotalPages === 'function') {
                    str = str + " of " + totalPagesExp;
                }
                
                doc.setFontSize(8);
                doc.setTextColor(40);
                //doc.setFontStyle('normal');
                
                var pageSize = doc.internal.pageSize;
                var pageHeight = pageSize.height ? pageSize.height : pageSize.getHeight();
                doc.text(str, 14, pageHeight - 10);
            },
        });

        // Total page number plugin only available in jspdf v1.0+
        if (typeof doc.putTotalPages === 'function') {
            doc.putTotalPages(totalPagesExp);
        }

        doc.save('table.pdf');
    }

The entire page gets distorted.

Please help.

UPDATE codepen where it is working perfectly fine. Only in LWC, something is causing problem.