How to find a DOM object by the text using JS/Chrome extension execution?

Currently trying to access DOM object by the ‘text’, and I can’t find this using standard javascript way – ‘evaluate’ or looping through all th object.

DOM object that I want to access is with textContent <target_text>
I have confirmed that <target_text> is unique across the whole page.

Executing this as part of Chrome extension.

Target element looks like this

<th class="MuiTableCell-root table-header-cell h-8 whitespace-pre-wrap align-middle text-left MuiTableCell-head MuiTableCell-sizeMedium css-1bz4y89" scope="col" style="width: 50%;">Target Text</th>

So there is not unique class or tag to point it by.
It’s parent look like

<tr class="MuiTableRow-root MuiTableRow-head css-16pe4ub"><th class="MuiTableCell-root table-header-cell h-8 whitespace-pre-wrap align-middle text-left MuiTableCell-head MuiTableCell-sizeMedium css-1bz4y89" scope="col" style="width: 50%;">Target Text</th><th class="MuiTableCell-root table-header-cell h-8 whitespace-pre-wrap align-middle text-left MuiTableCell-head MuiTableCell-sizeMedium css-1bz4y89" scope="col" style="width: 50%;">Finding</th><th class="MuiTableCell-root table-header-cell h-8 whitespace-pre-wrap align-middle text-left w-13 MuiTableCell-head MuiTableCell-sizeMedium css-1bz4y89" scope="col"></th></tr>

  const targetElements = document.querySelectorAll('th');
  const targetElement = Array.from(techConcernsElements).find(th => 
    th.textContent.trim() === '<target_text>'
  );

This returns nothing

  const targetElement = document.evaluate(
    "//th[text()='<target_text>']", // This is the Xpath directly.
    document,
    null,
    XPathResult.FIRST_ORDERED_NODE_TYPE, // FIRST_ORDERED_NODE_TYPE returns the first matching node
    // Other options include:
    // UNORDERED_NODE_ITERATOR_TYPE - Returns all matching nodes in arbitrary order
    // ORDERED_NODE_ITERATOR_TYPE - Returns all matching nodes in document order
    // UNORDERED_NODE_SNAPSHOT_TYPE - Returns snapshot of matches in arbitrary order
    // ORDERED_NODE_SNAPSHOT_TYPE - Returns snapshot of matches in document order
    // FIRST_ORDERED_NODE_TYPE - Returns first match in document order
    // ANY_UNORDERED_NODE_TYPE - Returns any single matching node
    // NUMBER_TYPE - Returns number value
    // STRING_TYPE - Returns string value
    // BOOLEAN_TYPE - Returns boolean value
    null
  );

Tried out the explicit selector found in the chrome page

#root > div.flex.flex-col.h-screen > main > div > div > div > div:nth-child(2) > div > div.MuiPaper-root.MuiPaper-elevation.MuiPaper-rounded.MuiPaper-elevation1.MuiCard-root.relative.overflow-visible.rounded-sm.w-full.max-w-6xl.xl:max-w-7xl.css-1kxnsga > div.[&_tbody_tr_td]:text-lg.[&_th]:text-base > div:nth-child(2) > table > thead > tr > th:nth-child(1)

via
const targetElement = document.querySelector('#root > div.flex.flex-col.h-screen > main > div > div > div > div:nth-child(2) > div > div.MuiPaper-root.MuiPaper-elevation.MuiPaper-rounded.MuiPaper-elevation1.MuiCard-root.relative.overflow-visible.rounded-sm.w-full.max-w-6xl.xl\:max-w-7xl.css-1kxnsga > div\[\&_tbody_tr_td\]\:text-lg\[\&_th\]\:text-base > div:nth-child(2)');

This also returns nothing