Replace header and footer of docx

Question

I have a 'model' document that includes a header and footer. I want to transfer these elements to another document, which is a 'thesis'. Below is my current code to achieve this:

const modelBlob = await response.blob();
const model = await JSZip.loadAsync(modelBlob);

const headerXml1 = await model.file('word/header1.xml').async('string');
const footerXml1 = await model.file('word/footer1.xml').async('string');

thesis.file('word/header1.xml', headerXml1);
thesis.file('word/footer1.xml', footerXml1);

saveAs(await thesis.generateAsync({ type: 'blob' }), fileName);

and the result is

the text inside the images reads: "Unable to display this image".