jsPDF-Autotable: How do I add a content after the header and also add a footer?

I have this sample table already with a header. However, I also wanted to put the div="content" after the header in the first page and add the div="footer" in every page. How can I do this?

I have a div content that I wanted to show this in the print as well.

enter image description here

enter image description here

codesandbox: https://codesandbox.io/s/print-to-pdf-8ij2ws?file=/demo.js

Codes:

 const handlePrint = () => {
    console.log("clicked");
    const doc = new jsPDF();
    var img = new Image();
    img.src = require("./assets/logo-social.png");

    img.onload = () => {
      var finalY = doc.lastAutoTable.finalY || 10;

      const columns = [
        "First Name",
        "Last Name",
        "Number",
        "Address",
        "Total Amount"
      ];
      const rows = [];
      data.map((item) =>
        rows.push([
          item.firstName,
          item.lastName,
          item.houseNo,
          item.Address,
          item.totalAmount
        ])
      );

      //used this one
      doc.autoTable(columns, rows, {
        startY: finalY + 30,
        // showHeader: "never",
        didDrawPage: function (data) {
          // Header

          doc.setFontSize(20);
          doc.setTextColor(40);
          doc.text("Title here", data.settings.margin.left + 21, 22);
          doc.text("subtittle here", data.settings.margin.left + 21, 28);
          doc.addImage(img, "png", 10, 15, 25, 15);
        }
      });
      doc.save("order.pdf");
    };

};