Я хочу использовать контекст в React для передачи информации аутентификации дочерним компонентам. Мой поставщик контекста находится в файле с именем AuthContext.js:

import React, { Component, createContext } from 'react';

export const AuthContext = createContext();

class AuthContextProvider extends Component {
    state = {
        isAuthenticated: false
    };
    toggleAuth = () => {
        this.setState({ isAuthenticated: !this.state.isAuthenticated });
    };
    render() {
        return (
            <AuthContext.Provider value={{...this.state, toggleAuth: this.toggleAuth}}>
                {this.props.children}
            </AuthContext.Provider>
        );
    }
}

export default AuthContextProvider;

Но когда я обращаюсь к контексту из дочерних компонентов, он возвращает undefined

import { AuthContext } from "../contexts/AuthContext";

export default function ButtonAppBar() {
    return(
        <AuthContext.Consumer>{(authContext) => {
            console.log(authContext);
        }}</AuthContext.Consumer>
    );
}

После проверки инструментов разработчика React я пришел к выводу, что ButtonAppBar не находится внутри AuthContextProvider. Импорт правильный. Есть ли причина для этого, кроме ошибок импорта?

Версия React: 16.9.0