Как (правильно) проверить, находится ли элемент в области просмотра в React?

Question

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

Я могу сделать это, используя комбинацию Javascriptи реагировать на хуки, но хотя код работает в некоторых компонентах моего приложения, в других он не работает;Я думаю, из-за реакции жизненных циклов.

Я также знаю, что это НЕ тот способ, которым я должен делать вещи в реакции, поэтому предпочел бы достичь того же результата, но надлежащим образом.

Я смотрел на использование ссылок, но в идеале хотел избежать необходимости изменять мой функциональный компонент на класс, так как я хотел бы использовать обработчики реакции для показа / скрытия фиксированного cta.Однако, если это требование для получения желаемой функциональности, я мог бы пойти на это.

Вот что я получил до сих пор - в основном, я хочу заменить document.querySelector методом реагирования:

  useEffect(() => {
    const CTA = document.querySelector('#CTANextSteps');
    const ApplyStyle = () => (isInViewport(CTA) ? setVisible(false) : setVisible(true));
    ApplyStyle();
    window.addEventListener('scroll', ApplyStyle);
    window.addEventListener('resize', ApplyStyle);
    return function cleanup() {
      window.removeEventListener('scroll', ApplyStyle);
      window.removeEventListener('resize', ApplyStyle);
    };
  });

  const isInViewport = (elem) => {
    const bounding = elem.getBoundingClientRect();
    return (
      bounding.top >= 0 &&
      bounding.left >= 0 &&
      bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
      bounding.right <= (window.innerWidth || document.documentElement.clientWidth)
    );
  };

Как упоминалось выше, эта функция работает в некоторых областях приложения без проблем, но не работает в других;Я получаю Cannot read property 'getBoundingClientRect' of null ошибку.Я был удивлен, что это сработало вообще, но вместо того, чтобы пытаться заставить его работать везде, я хочу переписать его правильно.

Как всегда, любая помощь будет высоко ценится.Спасибо.