angular - Fabric.js pdf editor is not working in Adobe Accrobate - Stack Overflow

I created a PDF editor in my Angular / laravel application using: "fabric": "^6.5.3" and "pdf-lib": "^1.17.1". The thing is when I download the pdf, it is readable with all its edits in Chrome or Microsoft Edge, but when I try to read it using Adobe Acrobat Reader, the last page shows the following error: There was an error processing a page. There was a problem reading this document (18). But only if the last page is edited with a shape image or drawing, not with simple text or line. So why is that happening? here is the function responsible for downloading the edited pdf:

 async downloadPdfWithEdits() {
if (!this.pdfDoc) return;
const pdfDoc = await PDFDocument.create();
const existingPdfBytes = await fetch(this.pdfURL).then(res => res.arrayBuffer());
const existingPdf = await PDFDocument.load(existingPdfBytes);

for (let i = 1; i <= this.totalPages; i++) {
  const [copiedPage] = await pdfDoc.copyPages(existingPdf, [i - 1]);

  const canvasState = this.pageStates[i];
  if (canvasState) {
    //console.log(`Loading canvas state for page ${i}:`, canvasState);
    // Create an offscreen canvas element
    const tempCanvasElement = document.createElement('canvas');
    tempCanvasElement.width = copiedPage.getWidth();
    tempCanvasElement.height = copiedPage.getHeight();

    // Ensure it is added to the DOM (hidden) to avoid "ctx" undefined errors
    document.body.appendChild(tempCanvasElement);

    const tempCanvas = new fabric.StaticCanvas(tempCanvasElement);
    console.log("Fabric.js canvas:", tempCanvas);
    try {
      await new Promise<void>((resolve, reject) => {
        tempCanvas.loadFromJSON(canvasState, () => {
          //