<Link> tag doesn't trigger router events properly for my spinner loader in NextJS

Question

function Loading(){
  const router = useRouter();
  const [isLoading, setIsLoading] = useState<boolean>(false);
  
  useEffect(() => {
    const handleStart = (url : any) => (url !== router.asPath) && setIsLoading(true);
    const handleComplete = (url : any) => (url === router.asPath) && setIsLoading(false);
    
    router.events.on("routeChangeStart", handleStart);
    router.events.on("routeChangeComplete", handleComplete);
    router.events.on("routeChangeError", handleComplete);


    return () => {
      router.events.off("routeChangeStart", handleStart);
      router.events.off("routeChangeComplete", handleComplete);
      router.events.off("routeChangeError", handleComplete);
    }
  });
  console.log(isLoading);
  
  return isLoading ? (
    <div className='spinner-wrapper fixed bg-white h-screen w-screen left-0 top-0 flex justify-center items-center'>
      <BeatLoader size={12}/>
    </div>
  ) : <></>

}

I have this component in NextJS to show a loader spinner during page transitions. Although it works properly when I use router.push(url) or router.replace(url), It does not work through "Link" tags.