multiple pages in jspdf-autotable - salesforce

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.