Image Transform Related to TextContent.items transform

[obf73]

I have a pdf with this content -

i need to figure out a way to correlate the text content and the image content on the page.
everything is rendered in the viewport which has the dimensions of 612 x 792.
all of the text content has y values between 0 and 792 but the image content has a y value of 2181.25 or -1389 based on the "lastTransform" below.
how is the image placed above the text content with those values?

const page = await pdfDoc.getPage(pageNum);
const textContent = await page.getTextContent();
const operatorList = await page.getOperatorList();
const viewPort = await page.getViewport({ scale: 1.0 });

for (let i = 0; i <= 25; i++) {
  let item = textContent.items[i];
  const tx = pdfjsLib.Util.transform(
    viewPort.transform,
    item.transform
  );
  console.log(item)
  console.log("################  ITEM TX");
  console.log(tx)
}

the code above will give me the below output where from what i understand, the y coordinate of the text is the last item in the transform array

{
  str: '06:14:59 pm',
  dir: 'ltr',
  width: 51.8906226578906,
  height: 8.999999625,
  transform: [
    8.999999625,
    0,
    0,
    8.999999625,
    93.74999609374998,
    251.25002253125012
  ],
  fontName: 'g_d0_f3',
  hasEOL: false
}
################  ITEM TX
[
  8.999999625,
  0,
  0,
  -8.999999625,
  93.74999609374998,
  540.7499774687499
]

I am able to get the image information with this code

let lastTransform = null;
for (let j = 0; j < operatorList.fnArray.length; j++) {
  const fn = operatorList.fnArray[j];
  if (fn === pdfjsLib.OPS.transform) {
    lastTransform = operatorList.argsArray[j];
  } else if (fn === pdfjsLib.OPS.paintImageXObject) {
    const args = operatorList.argsArray[j];
    const imageId = args[0]; // The name of the image XObject
    const imageXObject = await page.objs.get(imageId);
    console.log(imageXObject)
    const tx = pdfjsLib.Util.transform(
      viewPort.transform,
      lastTransform
    );
    console.log(tx)
  }
}

the code above will give me this output for the image and the related transform below it and the "transformed" transform below that

{
  width: 2016,
  height: 1512,
  interpolate: undefined,
  kind: 2,
  data: Uint8ClampedArray(9144576) [
    84, 76, 65, 83, 75, 64, 82, 74, 63, 83, 75, 64,
    84, 76, 65, 86, 78, 67, 87, 79, 68, 87, 79, 68,
    82, 74, 63, 85, 77, 66, 84, 76, 65, 82, 74, 63,
    84, 76, 65, 89, 81, 70, 86, 78, 67, 78, 70, 59,
    82, 74, 63, 82, 74, 63, 83, 75, 64, 83, 75, 64,
    83, 75, 64, 83, 75, 64, 82, 74, 63, 82, 74, 63,
    84, 76, 65, 82, 74, 63, 81, 73, 62, 81, 73, 62,
    81, 73, 62, 82, 74, 63, 82, 74, 63, 82, 74, 63,
    80, 72, 61, 80,
    ... 9144476 more items
  ],
  dataLen: 9144576,
  ref: '22R'
}
################  LAST TRANSFORM
[ 1250, 0, 0, -937.5, 390.625, 2181.25 ]
################  TX
[ 1250, 0, 0, 937.5, 390.625, -1389.25 ]

the text object is directly underneath the image object

I don't understand how to correlate the text y coordinate of 540 and the image y coordintate of 2181.25 or -1389.
From what I understand, rendering is different between image and text, but I still feel as if there has to be some overlap somewhere.
I would like to be able to output something where the image y coordinate is something like 535 for the image, basically just above the text, just like it is rendered.