Resolved: How to get an element in center of list at scroll event in React?

export default function App() {
  const refList = useRef();

  function onScroll({ target }) {
    // get the computed dimension of the list
    const { height, width, x, y } = target.getBoundingClientRect();

    // adding x and y as offsets. You may skip this
    const x1 = (width + x) / 2;
    const y1 = (height + y) / 2;

    console.log(document.elementFromPoint(x1, y1)); // prints the element from given point
  }

  return (
    <div className="App">
      <ul
        ref={refList}
        onScroll={onScroll}
      >
        {NUMBERS.map((i) => (
          <li key={i}>{i}</li>
        ))}
      </ul>
    </div>
  );
}