how to integrate docx instance from Docx library into template for Docxtemplater

Question

const document = new Document({
      sections: sections,
    });

    const file = new File([Packer.toBlob(document)], "Seminar-template.docx", { type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document" });
    createContent(file)
  };
    
  const createContent = (file) => {
      loadFile(file, function (error, content) {
        if (error) {
          throw error;
        }
        var zip = new PizZip(content);
        var templater = new Docxtemplater().loadZip(zip);
        templater.setData(data);
        templater.render();
        var out = templater.getZip().generate({
          type: 'blob',
          mimeType: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
        });
        saveAs(out, "Seminar-template.docx");
      });
  }

So the following code should create a docx instance from "docx" fill with tables, paragraph etc. then I change it into a file because the loadfile takes a file as a parameter:

function loadFile(file, callback) {
  const reader = new FileReader();
  reader.onload = function (event) {
    const content = event.target.result;
    callback(null, content);
  };
  reader.readAsArrayBuffer(file);
}

the problem is I get this error

"Can't find end of central directory : is this a zip file?"

I tried to put a upload file system and download the docx instance which I will use it to upload. It works!

But when I do a console.log of it it show me the same thing.

The inside file:

File { name: "name.docx", lastModified: 1686324320207, webkitRelativePath: "", size: 16, type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document" }

The uploaded file:
File { name: "name.docx", lastModified: 1686316877602, webkitRelativePath: "", size: 6738, type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document" }

so why does the uploaded file work and not the inside one?