I need to print some images in a pdf with a brief description of each one of them. I notice that at the bottom it cuts them off

Here's my code:

async addImageToPdf(elementId: string) {
  const thumbnailsHtml = document.getElementById(elementId) as HTMLElement;
  await this.sleep(500);
  const canvas = await html2canvas(thumbnailsHtml, {
    windowWidth: 1200,
    windowHeight: 1200,
    scale: 1,
    scrollX: 0,
    scrollY: 0,
    allowTaint: true,
    useCORS: true,
  });
  const imgData = canvas.toDataURL("image/jpeg", 0.9);
  await this.sleep(500);
  const imgProps = this.pdf.getImageProperties(imgData);
  const pdfWidth = 210 /* this.pdf.internal.pageSize.getWidth() */;
  const pageHeight = this.pdf.internal.pageSize.getHeight();
  const imgHeight =
      (imgProps.height * pdfWidth) / 1161 /* imgProps.width */;
  var heightLeft = imgHeight;
  var position = 0;

  
    this.pdf.addImage(
      imgData,
      "JPEG",
      10, // Position of image from left and right
      8, // Position of image from top and bottom
      pdfWidth,
      imgHeight,
      undefined,
      "FAST"
    );
    heightLeft -= pageHeight;
    while (heightLeft >= 0) {
      position = heightLeft - imgHeight;
      this.pdf.addPage();
      this.pdf.addImage(
        imgData,
        "JPEG",
        5,
        position + 5,
        pdfWidth,
        imgHeight,
        undefined,
        "FAST"
      );
      heightLeft -= pageHeight;
    }
  
}

This comes from a Vue template thar loops through all the images that are stored in an array.

Is there any way to set X amount of pictures per page so I avoid this from happening?