Как исправить некорректное поведение программы в режиме StrictMode?

У меня проблема в режиме StrictMode. Написал кастомный хук для intersection observer, чтобы отображать карточки по несколько товаров и загружать товары при прокрутке страницы. И каждый раз, когда происходит пересечение в intersection observer, выполняется запрос на сервер и подгружаются товары. Но в режиме StrictMode в компоненте Main, где я использую этот кастомный хук, товары в массиве дублируются и состояние skip, которое отвечает за количество товаров, которое нужно пропустить от начала, работает некорректно. Код привожу ниже:

Файл hooks.ts:

export const useScroll = (
        parentRef: any,
        childRef: any,
        isLoading: boolean,
        callback: any
    ) => {
    useEffect(() => {
        const options = {
            root: parentRef.current,
            rootMargin: "0px",
            threshold: 0,
        };

        const observer = new IntersectionObserver(([target]) => {
            if (target.isIntersecting && !isLoading) {
                callback();
            }
        }, options);

        observer.observe(childRef.current);

        return () => {
            childRef.current && observer?.unobserve(childRef.current);
        };
    }, [callback]);
};

Файл Main.tsx:

export const Main: React.FC = (): React.JSX.Element => {
    const [products, setProducts] = useState<ProductType[]>([]);
    const [isLoading, setIsLoading] = useState(false);
    const [skip, setSkip] = useState<number>(0);
    const parentRef = useRef<HTMLDivElement>(null);
    const childRef = useRef<HTMLDivElement>(null);

    const productFetching = useCallback(() => {

        if (!isLoading) {
            setIsLoading(true);
            fetch(`https://dummyjson.com/products?limit=6&skip=${skip * 6}`)
                .then((response) => response.json())
                .then((data) => {
                    setProducts((prevProducts) => [
                        ...prevProducts,
                        ...data.products,
                    ]);
                    console.log("[skip]: ", skip, isLoading);
                    setSkip(skip + 1);
                })
                .finally(() => setIsLoading(false));
        }
    }, [isLoading, skip]);

    useScroll(parentRef, childRef, isLoading, productFetching);

    return (
        <div className="main">
            <div className="container">
                <Header />
                <div className="products" ref={parentRef}>
                    {products.map((product) => {
                        return <Card key={product.id} {...product} />;
                    })}
                    <div
                        className="child"
                        ref={childRef}
                        style={{
                            width: "100%",
                            height: "20px",
                            background: "black",
                        }}
                    ></div>
                </div>
            </div>
        </div>
    );
};

Если убрать StrictMode, то все работает правильно. Как это можно исправить, уже что только не пробовал, но никак не получается. Помогите, пожалуйста, разобраться