intersection Observer doesn't work in Edge

Question

I have a problem, where I need to fetch data when user scrolls to the bottom of the page. To solve this problem I use intersection Observer. And it works in Chrome, Firefox, Opera and Safari, but it doesn't work in Edge for a reason that I don't understand (and there is no error as well).

Here is what it is supposed to be

And here is Edge (no Loading...)

• I put console.log inside handleObserver function (inside if (this.state.prevY > y) {} statement) --> in Edge it didn't trigger

• And I've tried to reference the target by id instead of this.loadingRef - the result was the same.

Here is my react component:

/**
 * App main react component
 */
export default class Main extends Component {
  state = {
    cards: [],
    isFetching: false,
    page: 1,
    prevY: 0,
    sortValue: 'name',
    searchValue: '',
    prevSearchValue: '',
    numberLoaded: null,
  };

  /**
   * Initial data fetch
   */
  componentDidMount() {
    this.getCards(this.state.page);

    // Options
    const options = {
      root: null, // Page as root
      rootMargin: '0px',
      threshold: 1.0,
    };
    // Create an observer
    this.observer = new IntersectionObserver(
        this.handleObserver.bind(this), // callback
        options
    );
    // Observe the `loadingRef`
    this.observer.observe(this.loadingRef);
  }

  /**
   * Callback for Intersection Observer
   */
  handleObserver(entities, observer) {
    const y = entities[0].boundingClientRect.y;
    if (this.state.prevY > y) {
      const curPage = this.state.page + 1;
      this.getCards(curPage, this.state.sortValue, this.state.searchValue);
      this.setState({page: curPage});
    }
    this.setState({prevY: y});
  }

  /**
   * Data fetch
   */
  getCards(page, sortValue = 'name', searchValue = '') {
   //... code
  }

  /**
   * Renders component
   */
  render() {
    const loadingCSS = {
      height: '10px',
      marginTop: '0',
      width: '1px',
    };
    const {cards, isFetching, numberLoaded} = this.state;
    return (
      <main className="l-main">
        <h1 className="t1">
          MTG Creatures{numberLoaded && ` (${numberLoaded} loaded)`}
        </h1>
        {!isFetching && cards.length === 0 && (
          <p className="t0">No cards have been found</p>
        )}

        {/* code */}

        {cards.length !== 0 && <Cards cards={cards} />}
        <div
          ref={(loadingRef) => (this.loadingRef = loadingRef)}
          style={loadingCSS}
        >
          {isFetching && <Loader />}
        </div>
      </main>
    );
  }
}

Per suggestion in MS Edge: IntersectionObserver. Does it work for you? I've tried to add min-width, min-height and a border --> it didn't work for me