MutationObserver is not triggered when innerText changes

I am running a Javascript file on this url. I am interested in changes in the red outlined elements:

I wrote the following script

const $xpath = xp => {
  const snapshot = document.evaluate(
    xp, document, null,
    XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null
  );
  return [...Array(snapshot.snapshotLength)]
    .map((_, i) => snapshot.snapshotItem(i));
};

const xpathOdds = './/div[@col-id="bestOdds"]/descendant::div[@class="d-flex justify-content-between align-items-center"]';
var odds = $xpath(xpathOdds);
var config = {characterData: true,
              attributes: true,
              childList: true,
              subtree: true
};

odds.forEach(function(target, idx) {
  var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        console.log(mutation);
    });
  });
  observer.observe(target, config);
})

I am not sure why the MutationObserver is not triggered. It is triggered if I edit an element using rightmouse click - "Inspect". However, it is not triggered if the website itself makes changes to the elements in question. When an element changes it becomes yellow, so I know there should have been mutations What am I doing wrong?

from MutationObserver is not triggered when innerText changes