intersectionObserver적용 했는데 왜 계속 inView 값이 False로 찍힐까요

import { useInView } from 'react-intersection-observer';
....

const Home = () => {
    ...
    const { mainPosts, hasMorePosts, loadPostsLoading } = useSelector(
        state => state.post,
    );
    const [ref, inView] = useInView();

    useEffect(() => {
        dispatch({
            type: LOAD_POSTS_REQUEST,
        });
    }, []);

    useEffect(() => {
        console.log(inView);
        if (hasMorePosts && !loadPostsLoading) {
            const lastId = mainPosts[mainPosts.length - 1]?.id;
            dispatch({
                type: LOAD_POSTS_REQUEST,
                lastId,
            });
        }
    }, [inView, hasMorePosts, loadPostsLoading, mainPosts]);

    return (
        <AppLayout>
            .... 
            <div ref={hasMorePosts && !loadPostsLoading ? ref : undefined} />
        </AppLayout>
    );

...

pages/index.js 코드가 다음과 같은데

계속해서 콘솔창에 inView 값이 false라고 뜹니다.

true로 변화하지 않습니다.

그래서 if 문 구절이 실행조차 되지 않는데

뭐가 문제일까요