React context undefined in child component

I'm new in react and I try to use a context for passing current username, I follow the tutorial, but it seems that my context is always undefined, can someone explain what I'm doing wrong?

const AppContext = React.createContext({});
class App extends React.Component {
  componentDidMount() {
    this.setState({
      User: {
        Username: "Guest",
        UserType: {
          Description: "Guest"
        }
      }
    });
  }
  render() {
    return (<div className="App">
      <AppContext.Provider value={this.state}>
        <Toolbar/>
        <!--This work fine-->
        <h3>{this.state.User.Username}</h3>
      </AppContext.Provider>
    </div>);
  }
}
class Toolbar extends React.Component {
  constructor(props, context) {
    super(props);
  }
  render() {
    return (
    <header className="toolbar">
      <!-- print the username -->
    </header>
    );
  }
}
export default Toolbar;

I tried these solutions:

1. <h3>{this.context.Username}</h3>

2. <h3>{this.context.User.Username}</h3>

3. this is something I found on internet, but it gives me "Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined":

   <AppContext.Consumer>
   {(value) => (
   <p>Inside consumer {value}</p>
   )}
   </AppContext.Consumer>

Assign a contextType to read the context.

> Using this property lets you consume the nearest current value of that Context type using this.context.

class Toolbar extends React.Component {

  static contextType = AppContext;
  render() {
    return (
      <header className="toolbar">
        <!-- print the username -->
      </header>
    )
  }
}