Ошибка useContext с реакцией TypeError: невозможно прочитать свойство 'email', равное null

Question

Я пытаюсь получить значения хука с помощью контекста и редуктора в React, но когда я регистрирую json, я получаю три раза json с первым значением null, а второе и третье содержат правильные json. Когда я пытаюсь использовать его в ответном письме {user.email}, я получаю сообщение об ошибке «TypeError: Cannot read property 'email' of null». Но почему, если я регистрирую его и вижу объект json, я не могу его вернуть?

Спасибо за вашу помощь и извините за большой код.

function Profile() {

    useEffect(() => {
        userAuthenticated();
    }, []);

    // Extraer la información de autenticación
    const authContext = useContext(AuthContext);
    const { user, userAuthenticated } = authContext;

    return (
        <div>{user.email}</div>
    );
}

export default Profile;

const token = localStorage.getItem('token');
if (token) {
  tokenAuth(token);
}

function App() {
  return (

    <AlertState>
      <AuthState>
        <ModalState>
          <Router>
            <Navigation />
            <Route path='/' exact component={Header} />
            <Route path='/' exact component={CarouselCards} />
            <Route path='/newtournament' component={TorneoForm} />
            <Route path='/rankingtables' exact component={RankingsTables} />
            <Route path='/tournamenttable' exact component={TournamentTable} />
            <Route path='/playerlist' exact component={PlayerList} />
            <Route path='/' exact component={Draws} />
            <Route path='/' exact component={TopEvList} />
            <Route path="/player" component={Profile} />
            <Footer />
          </Router>
        </ModalState>
      </AuthState>
    </AlertState>
  );
}

export default App;

import {
    SUCCESS_SIGNUP,
    SIGNUP_ERROR,
    GET_USER,
    SUCCESS_LOGIN,
    LOGIN_ERROR,
    LOG_OUT
} from '../../types';

const AuthState = props => {
    const initialState = {
        token: localStorage.getItem('token'),
        authenticated: null,
        user: null,
        message: null,
        loading: true
    }

    const [state, dispatch] = useReducer(AuthReducer, initialState);

    // Retorna el usuario autenticado
    const userAuthenticated = async () => {
        const token = localStorage.getItem('token');
        if (token) {
            tokenAuth(token);
        }

        try {
            const response = await axiosClient.get('/api/auth');
            dispatch({
                type: GET_USER,
                payload: response.data.user
            });

        } catch (error) {
            console.log(error.response);
            dispatch({
                type: LOGIN_ERROR
            })
        }
    }

    return (
        <AuthContext.Provider
            value={{
                token: state.token,
                authenticated: state.authenticated,
                user: state.user,
                message: state.message,
                loading: state.loading,
                signupUser,
                logIn,
                userAuthenticated,
                logOut
            }}
        >{props.children}

        </AuthContext.Provider>
    )
}
export default AuthState;

import {
    SUCCESS_SIGNUP,
    SIGNUP_ERROR,
    GET_USER,
    SUCCESS_LOGIN,
    LOGIN_ERROR,
    LOG_OUT
} from '../../types';

export default (state, action) => {
    switch (action.type) {
        case GET_USER:
            return {
                ...state,
                authenticated: true,
                user: action.payload,
                loading: false
            }

        default:
            return state;
    }
}