Why is the Payload Null in My Redux Action?

I am working on a React project using Redux (not Redux Toolkit) and facing an issue where the payload in my Redux action is null. I’m using Firebase for authentication, and I’m trying to dispatch the setCurrentUser action with the user information, but it seems to be resulting in a null payload.

// Action creator
export const setCurrentUser = user => ({
    type: 'SET_CURRENT_USER',
    payload: user,
});

// User reducer
const INITIAL_STATE = {
    currentUser: null,
};

const userReducer = (state = INITIAL_STATE, action) => {
    switch (action.type) {
        case 'SET_CURRENT_USER':
            return {
                ...state,
                currentUser: action.payload,
            };
        default:
            return state;
    }
};

// App component
class App extends React.Component {
    unsubscribeFromAuth = null;
    unsubscribeFromSnapshot = null;

    componentDidMount() {
        const { setCurrentUser } = this.props;

        this.unsubscribeFromAuth = auth.onAuthStateChanged(async userAuth => {
            if (userAuth) {
                const userRef = await createUserProfileDocument(userAuth);

                this.unsubscribeFromSnapshot = onSnapshot(userRef, snapShot => {
                    setCurrentUser({
                        id: snapShot.id,
                        ...snapShot.data(),
                    });
                });
            } else {
                setCurrentUser(null); // This might be causing the null payload
            }
        });
    }

    componentWillUnmount() {
        if (this.unsubscribeFromAuth) this.unsubscribeFromAuth();
        if (this.unsubscribeFromSnapshot) this.unsubscribeFromSnapshot();
    }

    render() {
        return (
            <div>
                <Header />
                <Routes>
                    <Route path="/" element={<HomePage />} />
                    <Route path="/shop" element={<ShopPage />} />
                    <Route path="/signin" element={<SignInAndSignUpPage />} />
                </Routes>
            </div>
        );
    }
}

const mapDispatchToProps = dispatch => ({
    setCurrentUser: user => dispatch(setCurrentUser(user)),
});

When I check the action dispatched, the payload is null

{type: 'SET_CURRENT_USER', payload: null}

I set up Firebase authentication in my React app and dispatched a Redux action to set the current user.I expected the action to dispatch the user’s information upon successful login.