Проблемы в вызове Intersection Observer в React

У меня в классовом компоненте есть Intersection Observer, который делает видимой кнопку "показать еще", но она не всегда появляется.

class MyList extends Component {
  constructor(props) {
    super(props);
    this.rootRef = React.createRef();
  }

 componentDidMount() {
     const callbackFunction = (entries) => {
      entries.forEach((entry) => {
        if (entry.intersectionRatio > 0) {
          this.props.setIsVisible(true);
        }
      });
    };
    const options = {
      root: null,
      rootMargin: "0px",
      threshold: 0,
    };
    
    const observer = new IntersectionObserver(callbackFunction, options);
    if (this.rootRef.current) observer.observe(this.rootRef.current);
  }
render() {
return (<div ref={this.rootRef}>) 
}
}