Window.addEventListener не обновляет состояние, как ожидалось

Я хочу создать бесконечную прокрутку с нуля. Вот код:

import React,{useEffect, useRef, useState} from 'react';

const Container:React.FC<{}> = () => {
  const containerRef = useRef<HTMLDivElement | null>(null)
  const [ scrollNumber, setScrollNumber ] = useState<number>(1);
  const [posts, setPosts] = useState<any[]>([]);
 useEffect(() => {
  async function main(){
      const req = await  fetch('https://jsonplaceholder.typicode.com/posts');
      const result = await req.json();
      const pst = result.splice(0,10*scrollNumber);
      setPosts(pst)

    function scrollHandler(){
   if (containerRef.current?.getBoundingClientRect().bottom === window.innerHeight){
          console.info("Salam", scrollNumber);
          setScrollNumber(scrollNumber + 1);
        }
  }
  window.addEventListener("scroll", scrollHandler);
  return () => window.removeEventListener("scroll", scrollHandler);
  }
  main()
},[])
 useEffect(() => {
  const loadData = async () => {
    const req = await  fetch('https://jsonplaceholder.typicode.com/posts');
    const result = await req.json();
    const pst = result.splice(0,10*scrollNumber);
    setPosts(pst)
  }
  loadData()
 },[scrollNumber])
  return (
    <div  ref = {containerRef}>
      {posts.map(post => (
        <div key = {post.id}>
          <br/>
          <h1>{post.title}</h1>
      (<p>{post.body}</p>)
      <code>{post.userId}</code>
      <br/><br/>
      <hr/>
        </div>
      ))}
    </div>
  )
}


export default Container

Но есть проблема. Когда буду тестить. он всегда обновляется до 2 и больше ничего. Я искал это. Я обнаружил, что window.addEventListener помнит только initialState, поэтому состояние всегда обновляется до 2. Но я не смог найти никакого решения для кода.