Infinite Scroll (React + django rest)

Question

Witam próbuje wdrożyć na moją stronę tzw. Infinite Scroll kiedy użytkownik ma na swoim ekranie ostatni wczytany produkt React wykonuje zapytanie do API po więcej produktów (API napisane w django rest) i wykrywanie ostatniego elementu działa jak najbardziej natomiast, gdy dodam tam funkcję odpytującą API nale observer wykonuje setki zapytań i nie wiem czym może być to spowodowane.

Lista Prodóktów:

const ProductsList = () => {
    const dispatch = useDispatch()
    const { products, error, info } = useSelector(state => state.products)
    const observer = useRef()

    const [loading, setLoading] = useState(false)
    const [hasMore, sethasMore] = useState(products.length < info.count)
    const lastProductElementRef = useCallback(node => {
        if(loading) return
        if(observer.current) observer.current.disconnect()
        observer.current = new IntersectionObserver(entries => {
            console.log(hasMore)
            if(entries[0].isIntersecting && hasMore) {
                setLoading(true)
                dispatch(loadProducts())
                setLoading(false)
                sethasMore(products.length < info.count)
            }
        })
        if(node) observer.current.observe(node)
    }, [dispatch, hasMore, info.count, products])

    useEffect(() => {
        if(products) return
        dispatch(loadProducts())
    }, [dispatch])

    return (
        <div className='productsList'>
            {
                products && !loading ? products.map((product, index) => {
                    if(products.length === index + 1) {
                        return <Product product={product} key={product.id} innerRef={lastProductElementRef}/>
                    } else {
                        return <Product product={product} key={product.id} />
                    }
                }) : <p>loading..</p>
            }
            <div>{error && error}</div>
        </div>
    )

}

export default ProductsList;

axios:

export const loadProducts = () => async (dispatch, getState) => {
    try {
        dispatch({
            type: LOAD_PRODUCTS_REQUEST
        })

        let next = getState().products.info.next
        const url = next ? next : 'http://localhost:8000/api/items/product_list/'

        const { data } = await axios.get(url)

        dispatch({
            type: LOAD_PRODUCTS_SUCCESS,
            payload: {
                products: data.results,
                info: {
                    count: data.count,
                    next: data.next,
                    previous: data.previous
                }
            }
        })

    } catch (error) {
        dispatch({
            type: LOAD_PRODUCTS_FAIL,
            payload: error.response && error.response.data.detail
                ? error.response.data.detail
                : error.message,
        })
    }
}