Как получить доступ к значениям мотируемых элементов на React в браузере?

Есть сайт написаный на React (сторонний, к нему доступа нету). На главной страце есть карточка товаров с ценами и блок с пагинацией условных страниц. По нажатию на "ссылки" пагинации React обновляет значения в карточках товара.

Вопрос - Как в консоль получать значения новых значений цен после монтирования нового контента.

Вопрос именно в том, что это чужой DOM... и нужна показывать только визуальный вывод. Была идея так, это сделать...

window.onload = function() {
  const root = document.getElementById('center'); /// Это глобальный элемент в котором находяться карточка товаров
  const listItems = root.querySelectorAll('li');
  
  listItems.forEach(item => {
    item.addEventListener('click', () => {
      showMeFullPrices(); /// тут выполнение функции обработки данных. Не рботает
    });
  });
};

В консоле браузера. Не работает. Также была идея вешать таймер срабатываний, после нажатия на ссылку пагинции. Что б в консоль цены показывались, только после того как пройдет какой-то промежуток времени - тоже не отработало, функция отрабатывает мгновенно, а при монтировании нового контента ничего не показывает...

Подскажите как бы это решить ? Идеи по типу

import { useEffect } from 'react';

function App() {
  const updateContent = () => {
    // добавить сюда необходимый JS код для обновления содержимого страницы
  };

  useEffect(() => {
    updateContent();
  });

  return (
    // JSX компоненты
  );
}

не предлать, поскольку к Реакт компонентам в браузере не достучаться (ну или я не нашйл как).