Intersection observer Hook doesn’t work when threshold is set to 1 on google chrome

I am trying to make Intersection observer so I can implement infinity scroll in my react app. I decided to create a hook “useInfinityScroll” which accepts ref as prop, and by using intersection observer with threshold of 1 I wanted to be notified when user is intersecting with that ref. But for some reason when user scrolls to selected element and satisfies threshold requirement still “isIntersecting” is not equal to “true” value. And thats only the case for google chrome on my mac, it works fine with mozilla and with chrome on pc.

Here is my hook

import {useCallback, useEffect, useState} from "react";
import {not} from "ramda";

export function useInfinityScrollObserver(ref) {

    let [isVisible, setIsVisible] = useState(false);

    const handleIntersection = useCallback(([entry]) => {
        if (entry.isIntersecting){
            setIsVisible(true)
        }else if (not(entry.isIntersecting)){
            setIsVisible(false)
        }
    }, [])


    useEffect(() => {

        const options = {
            threshold: 1
        }

        // Create the observer, passing in the callback
        const observer = new IntersectionObserver(handleIntersection, options);

        // If we have a ref value, start observing it
        if (ref.current) {
            observer.observe(ref.current);
        }

        // If unmounting, disconnect the observer
        return () => {
            observer.unobserve(ref.current)
            observer.disconnect();
        }
    }, [ref,handleIntersection]);

    return isVisible;
}

Here is component where I use it:

import {useInfinityScrollObserver} from "../../hooks/useInfinityScrollObserver";
import {useEffect, useRef, useState} from "react";


const CountriesSection = () => {

    const sectionRef = useRef(null);
    const isVisible = useInfinityScrollObserver(sectionRef)

    useEffect(() => {
        if (isVisible){
            console.log("IS VISIBLE")
        }
    }, [isVisible])





    return (
        <section ref={sectionRef} className={styles['section-countries']}>


        </section>
    )

}

export default CountriesSection;