nextjs prevent route change hook (typescript)

route-change.ts

interface IRouteChangeProps {
    routeChangeFn: () => boolean
}
const useRouteChange = (props: IRouteChangeProps) => {
    const router = useRouter();
    const routeChangeStart = () => {
        const close_res = props.routeChangeFn();
        if (!close_res) {
            router.events.emit('routeChangeError', router.asPath, { shallow: true });
            throw 'Abort route change. Please ignore this error.';
        }
    }
    useEffect(() => {

        router.events.on('routeChangeStart', routeChangeStart);
        return () => {
            router.events.off('routeChangeStart', routeChangeStart);
        }
    }, [routeChangeStart])
}
export default useRouteChange;

example:

    useRouteChange({
        routeChangeFn: () => {
            if(hasUnsavedData){
               alert("where you want to go ? we have a lot to do")
               return false;
             }
            return true;
        }
    });