Imported Function undefined on first call

[aaronhawkey48]

Hello and thanks in advance.
I am having an issue where I am calling a function, but the browser is saying it is undefined on the first call, but when I call it again on the same page, it works the second time.

It doesn't like the login() function I am calling that is imported from another file.

Click Handler:

const handleSignIn = (e) => {
        e.preventDefault();
        if (isValid) {
            signIn({ variables: {input: {email: form.email, password: form.password}}})
                .then( r => {
                    console.log(typeof(login));
                    login(data.login.token);
                })
                .catch( e => {
                    console.log(e);
                });
        } else {
            setform({...form, dialogOpen: true, apiErrorMessage:'Email and password invalid.'});
        }
    }

https://pastebin.com/BG1EJLvC <-- full component
https://www.loom.com/share/54a0b70cfb4b4c87982a92eac5020de7

[TenzinLama]

have this issue as well

[jamesmosier]

Have any code you can share by any chance?