Initially, element never changes inView state.

[Danbka]

Hey,

I want to implement an Infinite Scroll with this library. I fetch data partially by 10 elements. Just a simple example:

const { ref, inView} = useInView()

const [data, setData] = useState([])

setData( fetchFirstPage() )

useEffect(() => {
    const newData = fetchNextPage()
    setData( data.concat(newData) )
}, [inView]);

return <div>
    data.map((element) => {
        <span>{element}</span>
    })
    <div ref={ref}><Loading /></div>
<div>

The problem is that I get data by 10 elements per request. And after the first call, all elements are rendered in a viewPort. It makes scrolling and fetching the next page impossible. How to solve this issue? Any ideas?