React Context Provide not passing the value to the Consumer - reactjs

Question

I am having the below Provide which contains the authentication state in it.
export const AuthenticationContext = React.createContext();
export default class AuthenticationProvider extends React.Component {
state = {
isAuthenticated: false
};
render() {
return (
<AuthenticationContext.Provider value={{ state: this.state }}>
{this.props.children}
</AuthenticationContext.Provider>
);
}
}
I have this wrapped to my Routes as below:
<Provider store={store}>
<ConnectedRouter history={history}>
<>
<GlobalStyle />
<AuthenticationProvider>
<SiteHeader />
<ErrorWrapper />
<Switch>
<PrivateHomeRoute exact path="/" component={Home} />
<Route exact path="/login" component={LoginPage}
</Switch>
</AuthenticationProvider>
</>
</ConnectedRouter>
</Provider>
But when I am trying to get context state into the <SiteHeader />, there is nothing passed down by the Context.Provide. My Cosumer is inside <SiteHeader /> is:
class SiteHeader extends React.Component {
render() {
return (
<div>
<AuthenticationContext.Consumer>
{context => (
<header>this is header {context.state.isAuthenticated}</header>
)}
</AuthenticationContext.Consumer>
</div>
);
}
I checked the React devtools, but it's same. Context.Consumer doesn't have value prop from the Provider.
What might be the issue here?

Answer 1

If a value is false, null or undefined, it will not render. I tried your code in a sandbox here. Just added the .toString() in the header, and the value of the boolean is shown in the header.

Answer 2

Context Consumers don't get any data as a props.
instead we pass them a render prop, in this case the children that we pass is the render prop function. and then in the render method of the Consumer something like this happens
render(){
this.props.children(value)
}
this is how we get the value as an argument of the render prop function.
The value of the context provider is not supposed to be passed in through props. You can learn more about render props here