How to add multiple images to a pdf using jspdf so that each image is on a separate page?

Question

JavaScript

Below are snippets from the vue component:
loading the pdf for instant viewing

...
<object id="pdf_viewer" type="application/pdf" :data="[pdf ? pdf : empty()]" width="100%" height="100%"></object> 
...

.
canvas is an array with canvas elements
I want to add each image to a separate (new) page in the document

generatePDF(canvas) {
            const pdf = new jsPDF('p', 'pt', 'a4')

            canvas.forEach((image, i) => {
                !!i && pdf.addPage() 
                pdf.addImage(image, 'PNG', 80, 80, image.width, image.height, `image${i}`)
            })

            // pdf.output('save', 'tasks.pdf');   
                                            
            this.pdf = pdf.output('datauristring'); // здесь походу что-то не то происходит
        },
        empty() {
            const pdf = new jsPDF();
            return pdf.output('datauristring');
        },

The data attribute of the object element should go pdf.output('datauristring')
If there is more than one element in the canvas array , something goes wrong ( pdf.output('datauristring') returns an incorrect value, apparently, there can be no other reasons), and if there is one, then everything is fine.
Interestingly, when saving the document (if you execute pdf.output('save', 'tasks.pdf'); ), the pdf is generated correctly.
Help to understand what is wrong
UPDATED
https://codesandbox.io/embed/5x26o14jn