Resolved: React Function to Component and Setting State with Function Return

...
const signInWithGitHub = async () => {
  try {
    const res = await signInWithPopup(auth, githubProvider)
    const user = res.user
  } catch (err) {
    alert(err) // ** I want to pass "err" from here to Login
               // ** component by updating Logins state for a message
  } 
}

export {signinWithGitHub}
...

import React, { useEffect, useState } from "react"
import { useAuthState } from "react-firebase-hooks/auth"
import {
  auth,
  signInWithGitHub
} from "../lib/firebase"

function Login() {
  const [user, loading, error] = useAuthState(auth)
  render(
    {* Below is the method call from the imported custom firebase function *}
    <button onClick={signInWithGitHub}>
      Login with GitHub
    </button>
  )
} 
...

export const signInWithGitHub = async () => {
  try {
    const res = await signInWithPopup(auth, githubProvider);
    const user = res.user;
  } catch (err) {
    throw new Error(err?.message || "Unable to sign in with GitHub");
  }
};

import React, { useEffect, useState } from "react";
import { useAuthState } from "react-firebase-hooks/auth";
import { auth, signInWithGitHub } from "../lib/firebase";

function Login() {
  const [user, loading, error] = useAuthState(auth);
  const [errorMessage, setErrorMessage] = useState("");
  const onLogin = async () => {
    try {
      await signInWithGitHub();
    } catch (err) {
      setErrorMessage(err);
    }
  };
  return (
    <>
      <button onClick={onLogin}>Login with GitHub</button>
      {!!errorMessage && <h5>{errorMessage}</h5>}
    </>
  );
}