Почему у моего компонента offsetTop = 0 в React.js?

Question

Я создал компонент, который анимирует элемент при его прокрутке.

Код:

      import React from 'react';
import './FadeText.css';

const FadeText = ({ datatarget = 'right', children, ...props }) => {
  const ref = React.createRef(null);

  const debounce = function (func, wait, immediate) {
    var timeout;
    return function () {
      var context = this,
        args = arguments;
      var later = function () {
        timeout = null;
        if (!immediate) func.apply(context, args);
      };
      var callNow = immediate && !timeout;
      clearTimeout(timeout);
      timeout = setTimeout(later, wait);
      if (callNow) func.apply(context, args);
    };
  };

  const onScroll = debounce(function () {
    const element = ref.current;
    console.log(element);
    const windowTop = window.pageYOffset + window.innerHeight * 0.75;
    console.log(windowTop);
    if (windowTop > element.offsetTop) {
      element.classList.add('animate');
    } else {
      element.classList.remove('animate');
    }
  }, 75);

  React.useEffect(() => {
    window.addEventListener('scroll', () => onScroll(), {});
  }, [onScroll]);

  return (
    <div ref={ref} datatarget={datatarget} {...props}>
      {children}
    </div>
  );
};

export default FadeText;

Первый элемент имеет обычный offsetTop, но у остальных, где я использую компонент, offsetTop равен 0. Я использовал getBoundingClientRect() тоже, но не лучшим образом ...