react bug - context update no componentDidUpdate

HTML

<script src="https://unpkg.com/prop-types@15.5.10/prop-types.js"></script>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="container"></div>

Babel + JSX

const ThemeContext = React.createContext({theme: "dark", toggleTheme: () => {}});

class ThemeProvider extends React.Component {
    constructor(props) {
        super(props)

        this.toggleTheme = () => {
            this.setState(state => ({
                theme:
                    state.theme === "dark"
                        ? "light"
                        : "dark",
            }));
        };
        
        this.state = {
            theme: "light",
            toggleTheme: this.toggleTheme,
        }
    }

    render() {
        return <ThemeContext.Provider value={this.state}>{this.props.children}</ThemeContext.Provider>
    }
}

class ThemeDisplay extends React.Component {
    render() {
        console.log("render display")
        return (
            <ThemeContext.Consumer>
                { ({theme}) => (
                    <div>{theme}</div>
                )}
            </ThemeContext.Consumer>
        )
    }

    componentDidUpdate() {
        console.log("update display")
    }
    
}
class ThemeButton extends React.Component {
    render() {
        console.log("render button")
        return (
            <ThemeContext.Consumer>
                { ({toggleTheme}) => (
                    <button onClick={toggleTheme}>TOGGLE</button>
                )}
            </ThemeContext.Consumer>
        )
    }

    componentDidUpdate() {
        console.log("update button")
    }
}

class App extends React.Component {
	static propTypes = {
  	name: PropTypes.string,
  };
  
  render() {
  	return (
        <ThemeProvider>
            <ThemeDisplay/>
            <ThemeButton/>
        </ThemeProvider>
    )
  }
}

ReactDOM.render(<App name="world"/>, document.getElementById('container'));