AuthUserProvider.tsx: Typescript woes

AuthUserProvider.tsx

import { useReducer, useEffect } from "react";
import firebase from "firebase/compat/app";
import { User as FirebaseUser } from "firebase/auth";
import {
  IAuthProvider,
  mainReducer,
  initialState,
  AuthUserActionsTypes,
  formatAuthUser,
  authUserContext,
} from "./AuthUserContext";

export function AuthUserProvider({ children }: IAuthProvider) {
  const [state, dispatch] = useReducer(mainReducer, initialState);

  const authStateChanged = async (authState: FirebaseUser | null) => {
    if (!authState) {
      debugger;
      dispatch({
        type: AuthUserActionsTypes.FIREBASE_LOGOUT,
        payload: null,
      });
      return;
    }

    var formattedUser = formatAuthUser(authState);
    debugger;
    dispatch({
      type: AuthUserActionsTypes.FIREBASE_LOGIN,
      payload: {
        loading: false,
        authUser: formattedUser,
      },
    });
  };

  useEffect(() => {
    const unsubscribe = firebase.auth().onAuthStateChanged(authStateChanged);
    return () => unsubscribe();
  }, []);

  return (
    <authUserContext.Provider value={{ state, dispatch }}>
      {children}
    </authUserContext.Provider>
  );
}