Как я могу отслеживать высоту div в React? ⇐ CSS

[Anonymous]

Что я пытаюсь сделать
Я хотел бы отслеживать высоту элементов div, чтобы иметь возможность динамически изменять расстояния. Анимация должна перемещаться в зависимости от ширины экрана (когда экран узкий, текст складывается и высота меняется).

Например, на полном экране расстояние составляет 180, на узких экранах — длиннее. Я считаю, что приведенный ниже расчет даст правильное значение (80 за 40 маржи).
В utils/animation.js
window.onload = function textDivHeight() { divElement = document.querySelector(".textContainer"); elHeight = divElement.offsetHeight; divHeight = elHeight + 80; console.log(divHeight) вернуть divHeight } экспортировать const textDiv = textDivHeight(); В компонентах import {animationStart, textDiv } из "../../utils/animation"; const Видео = () => { возвращаться ( ) } Div, к которому я пытаюсь получить доступ (другой компонент) const IntroText = () => { возвращаться ( Проблема, с которой я столкнулся, заключается в том, что "divElement" не определен. Я считаю, что это связано с React и монтированием/загрузкой. Есть ли способ получить доступ и изменить это значение при загрузке?
Что я пробовал
Я также безуспешно пытался использовать useEffect и useState (пример показан ниже). Я также прочитал другие подобные сообщения и все еще получаю сообщение об ошибке.
useEffect(() => { // код... divsHeight = что-то setDivHeight(divsHeight) // использование состояния }, [])