Trouble Retrieving Form Fields in PDF Created with pdf-lib

Question

Problem: I am using pdf-lib to generate a fillable PDF by adding form fields to it. However, when I attempt to read the form fields using the same library in another code, it fails to retrieve them. Interestingly, if I open the generated PDF in Adobe Acrobat, make some edits (even without changing anything), and then save the file, the subsequent attempt to read the form fields using pdf-lib is successful.

Details:

• I'm using pdf-lib to create and manipulate PDFs programmatically.
• The form fields are added successfully during the initial creation process.
• The issue arises when attempting to read these form fields in a separate code using pdf-lib.
• Opening the PDF in Adobe Acrobat, making any edit, and saving the file resolves the problem.

const handleGeneratePreview = async ()=> {
    const pdfDoc = await PDFDocument.create();
    const page = pdfDoc.addPage([canvas.width,canvas.height]);
    const form = pdfDoc.getForm();
    const imgBytes = await getCanvasImg();
    const pngImage = await pdfDoc.embedPng(imgBytes);
    page.drawImage(pngImage, {
        x: page.getWidth() / 2 - pngImage.width / 2,
        y: page.getHeight() / 2 - pngImage.height / 2,
        width: pngImage.width,
        height: pngImage.height,
    })
    canvas._objects.forEach((ob,index)=>{
        if(ob.name === 'attribute'){
            drawField(page,ob,form);
        }
    })
    const pdfBytes = await pdfDoc.save();
    const pdfBlob = new Blob([pdfBytes], { type: 'application/pdf' });

    // Create a URL for the Blob
    const pdfUrl = URL.createObjectURL(pdfBlob);

    // Create a download link
    const downloadLink = document.createElement('a');
    downloadLink.href = pdfUrl;
    downloadLink.download = 'your_document.pdf'; // Specify the filename
    downloadLink.textContent = 'Download PDF';
    downloadLink.click();
        
}
const drawField =  (page,obj,form)=> {
    const superheroField = form.createTextField(`${obj.attributeName}`);
    superheroField.addToPage(page, {
        x: obj.left - obj.getScaledWidth()/2, y:canvas.getHeight() -  obj.top - obj.getScaledHeight()/2,
        width:obj.getScaledWidth(),height:obj.getScaledHeight(),
        borderColor:undefined,
        backgroundColor:undefined,

    })
}

Observations:

• Form fields are present in the PDF when viewed in Adobe Acrobat.
• Editing and saving the PDF in Adobe Acrobat allows subsequent successful form field retrieval using pdf-lib.

Question:

1. What could be causing this discrepancy between the initial creation of the PDF with pdf-lib and the successful retrieval of form fields after editing in Adobe Acrobat?
2. Are there specific properties or configurations that need to be set during PDF creation to ensure compatibility with pdf-lib's form field retrieval capabilities?

I appreciate any insights or guidance on resolving this issue. Thank you!