実現したいこと

Googleログイン直後に、自動で、ログインしたユーザー情報を取得したいです。

発生している問題

• 現在、GoogleログインのsignIn()関数を実行し、Googleログインに成功しました。
• 現在、ボタンをクリックして、ユーザー情報取得関数getUserData()関数を実行し、ユーザー情報の取得に成功しました。
• しかし、GoogleログインのsignIn()関数を実行した直後に、自動でユーザー情報取得関数getUserData()が実行されるようにコードを書きましたが、ユーザー情報取得関数getUserData()動きません。

ソースコード

import { signIn, signOut, useSession } from "next-auth/client";
import Link from "next/link";
import { apiUrlPart } from "../config";

import { useContext } from "react";
import { StateContext } from "../context/StateContext";

export default function Navigation() {
  const [session] = useSession();

  const { userId, setUserId } = useContext(StateContext);

  const getUserData = async () => {
    const apiRes = await fetch(`${apiUrlPart}/api/social/login/user/`, {
      method: "GET",
      headers: {
        Authorization: `JWT ${session.accessToken}`,
      },
    });
    const data = await apiRes.json();
    console.log(data.user);
    setUserId(data.user.id);
  };

  const logoutHandler = async () => {
    signOut(); // 実行される
    setUserId(""); // 実行される
  };

  const loginHandler = async () => {
    signIn(); // 実行される
    getUserData; // 実行されない
  };

  return (
    <header className="container flex flex-row items-center mx-auto px-5 py-14 max-w-screen-lg">
      <Link href="/">
        <a className="text-4xl font-bold text-white">SNS</a>
      </Link>

      <nav className="ml-auto">
        {session && session.accessToken ? (
          <>
            {/* 随時、取得したユーザー情報のIdを表示 */}
            userId: {userId}
            <Link href="/">
              <div className="inline-block bg-indigo-500 mr-8  hover:bg-indigo-600 text-white px-3 py-3 rounded cursor-pointer">
                ホーム
              </div>
            </Link>
            <Link href="/profile">
              <div
                className="inline-block bg-indigo-500 mr-8  hover:bg-indigo-600 text-white px-3 py-3 rounded cursor-pointer"
                onClick={getUserData}
              >
                ユーザー情報取得
              </div>
            </Link>
            <div
              className="inline-block bg-indigo-500 mr-8  hover:bg-indigo-600 text-white px-3 py-3 rounded cursor-pointer"
              onClick={logoutHandler}
            >
              ログアウト
            </div>
          </>
        ) : (
          <>
            <Link href="/">
              <div className="inline-block bg-indigo-500 mr-8  hover:bg-indigo-600 text-white px-3 py-3 rounded cursor-pointer">
                ホーム
              </div>
            </Link>
            <div
              className="inline-block bg-indigo-500 mr-8  hover:bg-indigo-600 text-white px-3 py-3 rounded cursor-pointer"
              // Googleログイン用の関数のみを実行
              // onClick={() => signIn()}

              // Googleログイン用の関数とユーザー取得用の関数を実行
              onClick={loginHandler}
            >
              ログイン
            </div>
          </>
        )}
      </nav>
    </header>
  );
}

自分で試したこと

「Navigation.js」ファイルにて、ログインボタンをクリックした際に、「loginHandler」関数を実行する。「loginHandler」関数では、　「signIn()」関数、「getUserData」関数を、順次、実行する。 非同期の関数を二つ並べるのは無理なのでしょうか？ ご教授お願いしたいです。

補足情報

Reduxは使わず、React HooksのuseContext()を使って、状態管理を行っています。