How to use this with React about in-view HOT 7 CLOSED

import React, { useRef, useState, useEffect } from "react";
import inView from "in-view";

inView.threshold(0.5);

function App() {
  const sectionA = useRef(null);
  const sectionB = useRef(null);
  const sections = [sectionA, sectionB];

  const [visibleSection, setVisibleSection] = useState(false);

  useEffect(() => {
    const onScroll = () => {
      sections.forEach(section =>
        inView.is(section.current) ? setVisibleSection(section) : null
      );
    };

    onScroll();

    document.addEventListener("scroll", onScroll);

    return () => document.removeEventListener("scroll", onScroll);
  });

  return (
    <div className="App">
      {visibleSection && (
        <div className="CurrentSection">{visibleSection.current.innerHTML}</div>
      )}
      <div ref={sectionA} className="Section">
        Section A
      </div>
      <div ref={sectionB} className="Section">
        Section B
      </div>
    </div>
  );
}

  const sections = ['one', 'two', 'three', 'four', 'five'];
  const [sectionInViewport, setSectionInViewport] = useState(null);
  useEffect(() => {
    sections.map(section => {
      //each section is rendered with `#${id}` from list above, i.e. <div id='one'>...</>
      inView(`#${section}`)
        .on('enter', () => {
          console.log(section);
          setSectionInViewport(section);
        })
      /*.on('exit', el => {
        //optional block
        setSectionInViewport(null);
      });*/
    });
  }, []);