Mutation is not a function? - reactjs

Question

I want to use social login by using graphql.
I want to get accessToken from social login by using kakaologin function and then i use it to make token by using kakakoLoginMutation function.
I try to make const name is access_token(=="123")
and if i success to login by kakao, i get accss_token by authObj. and then i set it to const access_token by using setAccess_token(useState).
console.log(authObj.access_token) show correct strings.
but after setAccess_token(authObj.access_token), console.log(access_token) show "123".
I think that console.log(access_token) have to show not "123" ohter strings.
and the other error is KakaoLoginMutation is not a function.
import { useState } from "react";
import { useMutation } from "react-apollo-hooks";
import { KAKAO_LOGIN, LOCAL_LOG_IN } from "./AuthQuery";
export default () => {
const [access_token, setAccess_token] = useState("123");
const localLogInMutation = useMutation(LOCAL_LOG_IN);
const kakaoLoginMutation = useMutation(KAKAO_LOGIN, {
variables: { provider: "kakao", accessToken: access_token },
});
const kakaoLogin = async (e) => {
e.preventDefault();
window.Kakao.Auth.login({
success: function (authObj) {
setAccess_token(authObj.access_token);
console.log(authObj.access_token);
console.log(access_token);
},
});
const {
data: { socialAuth: token },
} = await kakaoLoginMutation();
console.log(token);
if (token !== "" && token !== undefined) {
localLogInMutation({ variables: { token } });
}
};
return (
<a href="#" onClick={kakaoLogin}>
<h1>카카오로그인</h1>
</a>
);
};
Query.js
import { gql } from "apollo-boost";
export const KAKAO_LOGIN = gql`
mutation SocialAuth($provider: String!, $accessToken: String!) {
socialAuth(provider: $provider, accessToken: $accessToken) {
token
}
}
`;