I wanted to have the logo on the left side of the word "Title" but it is currently at the lower part of the page. And the text "Sample" is being covered by the table. How can I re-arrange these text and images properly?

I recreated it here: https://codesandbox.io/s/js-pdf-with-data-printable-from-displayed-data-lup6ir?file=/src/App.js

Codes:

const handlePrint = () => {
    console.log("clicked");
    const doc = new jsPDF();

    var img = new Image();
    img.src = require("./assets/logo-social.png");

    img.onload = () => {
      // await for the image to be fully loaded
      doc.addImage(img, "png", 10, 78, 12, 15);
      doc.text("Title here", 20, 10);
      doc.text("Sample", 20, 15);

      const columns = ["Data"];
      const rows = [];
      data.map((item) =>
        rows.push([
          item.cartItems.map(
            (item) => `${item.name}: ${item.color} = ${item.quantity}`
          )
        ])
      );

      doc.autoTable(columns, rows);
      doc.save("order.pdf");
    };
  };