React-Intersection-Observer running into infintite loop giving "Maximum update depth exceeded." in nextjs 14 app directory

Question

my nextjs 14 app gives me the error "Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops." only when i use this library.

my code:

 "use client"
 import { useInView } from "react-intersection-observer";
 import { useRouter } from "next/navigation";
 import { useEffect } from "react";

 interface Props{
    dark: boolean;
 }
 export const LoadMore = async ({dark}: Props) => {

   const { ref, inView } = useInView({
     threshold: 0
   })
 
   const router = useRouter();

   useEffect(() => {
     if(inView)
       router.push(`?page=${2}`, { scroll: false});
   }, [inView])
 
return (
 <>
 <div 
 // This line is causing the trouble when i assign the ref 
 ref={ref}
 className={`${!dark ? "lds-ellipsis" : "lds-ellipsis dark"} `}><div></div><div></div><div></div><div></div></div>
 </>
)
}

how to fix this issue

i tried using the useCallBack hook but it didn't work as well. How can i fix this issue so that the application does not break