I have an array of contents to be printed to a pdf which includes both images and text. sample is

boxes=[{type: 'text', value: 'sample'}, {type: 'image', url: 'someurl'}]

I am using forEach to iterate through array and drawText or drawImage. drawText is working fine with all pages. but drawImage is not working or the image is not visible in final result.

code is as

boxes.forEach(async (box, i) => {
      const pageNo = parseInt(box.pageNo) - 1;

      const page = pages[pageNo];
      // Get the width and height of the first page
      const { width, height } = page.getSize();

      let drawTextString = box.value;
      let isImage = false;
      let imageUrl = "";

      const image = async (url, box) => {
        return new Promise(async (resolve, reject) => {
          const pngImageBytes = await fetch(url).then((res) => res.arrayBuffer());

          const pngImage = await pdfDoc.embedPng(pngImageBytes);
          page.drawImage(pngImage, {
            x: (width * box.left) / 100 + 5 + leftOffset,
            y: height - (height * box.top) / 100 - 15 - bottomOffset,
            width: pngImage.width,
            height: pngImage.height,
          });
          console.log("done");
          if (i === relevantBoxes.length - 1) writePdf();

          resolve();
        });
      };

      switch (box.field) {
        case "image":          
          if (box.signImage) {
            isImage = true;
            imageUrl = box.signImage;
          }
          break;
        case "text":
          break;

        default:
          break;
      }

      if (!isImage) {
        page.drawText(drawTextString, {
          x: (width * box.left) / 100 + 5 + leftOffset,
          y: height - (height * box.top) / 100 - 15 - bottomOffset,
          size: parseInt(box.editorValues.fontSize.replace("px", "")),
          font,
          color: rgb(0, 0, 0),
        });

        if (i === relevantBoxes.length - 1) writePdf();
      } else {
        await image(imageUrl, box);
      }
    });

 async function writePdf() {
      const pdfBytes = await pdfDoc.save();
}

I thought it was because asynchronous behaviour. but the code flow seems fine.