So, the code below is taken from medium.com and I can't understand the way it's operating, which is troubling given that im getting errors left and right and having trouble troubleshooting them

const { user, jwt, setUser, checkLogin } = useContext(UserContext);

    useEffect(() => {
        async function fuck() {
            const res = await checkLogin();
            if (res.status === 200) {
                setUser(res.data);
            }
        }
        fuck();
    }, []);

The error I'm getting is that checkLogin isn't a function
useContext() is a function, but useContext(UserContext) returns an object, so sure, it isn't a function, agreed.
If instead I try to replace await checkLogin() with await useContext(UserContext), i get hook errors
Error: Invalid hook call. Hooks can only be called inside of the body of a function component.
And as I understand it, I'm getting this error because I'm breaking the Rules of Hooks, calling it in a nested function and not at the top level in the body of a function, right?
So, in that regard, the way to go would be the way indicated in the medium.com article, but it also throws errors and doesn't work, so I'm not sure where the problem actually lies.. any tips?
article : https://javascript.plainenglish.io/build-a-solid-and-secure-login-workflow-in-next-js-with-strapi-part-2-register-and-login-4971cc7176f5

any and all help would be greatly appreciated ❤️
(I have kept in mind that it's using the pages router and i'm using the app router and have kept note f the migration guide to make any changes necessary in that regard, and i dont think i've left anything out, but other than that, the code is a carbon copy of the article.