Nextjs redux-thunk wanting to show an alert after dispatch but the alert isn’t seeing the error variable new state

Question

As I mentioned in the title, I want to show an alert showing if the action was successful or not. But when the alert is supposed to show an error it shows success. When I checked the error variable it says undefined but when I checked it by showing it on the website with JSX it showed the error and not undefined. I'm using redux-thunk

My Code:

loginScreen.js

dispatch(login(email, password)).then(() => error ? alert(error) : alert("success"));

loginAction.js

try {
    dispatch({
        type: USER_LOGIN_REQUEST,
    });

    const config = {
        headers: {
            "Content-Type": "application/json",
        },
    };

    const { data } = await axios.post(
        "/api/auth/login",
        { email, password },
        config
    );

    dispatch({
        type: USER_LOGIN_SUCCESS,
        payload: data,
    });

    localStorage.setItem("user", JSON.stringify(data.token));
} catch (error) {
    dispatch({
        type: USER_LOGIN_FAIL,
        payload:
            error.response && error.response.data.message
                ? error.response.data.message
                : error.message,
    });
}

loginReducer.js

export const userLoginReducer = (state = {}, action) => {
switch (action.type) {
    case USER_LOGIN_REQUEST:
        return { loading: true };
    case USER_LOGIN_SUCCESS:
        return { loading: false, userInfo: action.payload };
    case USER_LOGIN_FAIL:
        return { loading: false, error: action.payload };
    case USER_LOGOUT:
        return {};
    default:
        return state;
}};