React/Next-在useContext中引用函数

我将firebase auth移到了useContext组件中。 我唯一想弄清楚的是如何将useContext中的异步GoogleLogin函数引用到Login页面上的按钮(onClick事件)。

这是我的UserContext文件

import { signInWithPopup, GoogleAuthProvider } from 'firebase/auth';
import { auth } from '../utils/firebase';
import { useAuthState } from 'react-firebase-hooks/auth';
import { createContext } from 'react';
import { useRouter } from 'next/router';

const UserContext = createContext(null);

export const UserProvider = ({ children}) => {
  const route = useRouter();
  const [user, loading] = useAuthState(auth);

  const googleProvider = new GoogleAuthProvider();
  const GoogleLogin = async () => {
    try {
      const result = await signInWithPopup(auth, googleProvider);
    } catch (error) {
      console.log(error);
    }
  };

  return <UserContext.Provider value={user}>{children}</UserContext.Provider>;
};
export default UserContext;

这是我的登录组件

import UserContext from '../../components/UserContext';
import {useContext } from 'react';
import { FcGoogle } from 'react-icons/fc';

const Login = () => {
  const user = useContext(UserContext);

  return (
    <div className='shadow-xl mt-32 p-10 text-gray-700'>
      <h2 className='text-2xl font-medium'>Join Today</h2>
      <div className='py-4'>
        <h3 className='py-4'>Sign in with one of the providers</h3>
        <button
          onClick={GoogleLogin}
          className='text-white bg-gray-700 w-full font-medium rounded-lg flex align-middle p-4 gap-2'>
          <FcGoogle className='text-2xl'></FcGoogle> Sign in with Google
        </button>
      </div>
    </div>
  );
};

export default Login;