React Hooks — использование useRef без прямого доступа к коду HTML-элемента?

С React я нахожусь внутри одного репозитория, а элементы HTML загружаются из другого репозитория, который я наблюдаю за использованием pageLoaded. Внутри updateHeader есть еще выбор элементов HTML и манипулирование атрибутами/классами.

useEffect(() => {
        if (pageLoaded.status) {
            if (someCondition) {
                updateHeader(ubeName);
            } else {
                document.querySelector('.headerbar-menu').style.display = 'block';
                if (document.querySelector('.headerbar-menu.affiliates-wrapper')) {
                    document.querySelector('.headerbar-menu.affiliates-wrapper').style.display = 'none';
                }
            }
        }
    }, [pageLoaded.status])

Проблема здесь, очевидно, в том, что мы не должны использовать querySelector, и я думаю, что это может вызвать некоторые неожиданные функциональные возможности. Элементы не оцениваются должным образом и не отображаются до тех пор, пока какая-либо часть состояния не изменится, то есть обработчик состояния прокрутки, поэтому при начальной загрузке страницы элементы не отображаются с их новыми атрибутами до прокрутки.

Я хотел бы попытаться разрешить использование useRef, но не имею прямого доступа к html. Есть ли способ динамически подключить ссылку к элементу без доступа к коду HTML?

Спасибо за ваше время и внимание!