reactjs - React Context が子コンポーネントにデータを渡さない

Question

React初心者です。いくつかの中程度の記事と React ドキュメント (複雑です) を見て、この非常に基本的なContext APIを実装しようとしました。
コンポーネントツリーを介してデータを渡し、子コンポーネントでそれらにアクセスするという正しい結果が得られない理由であるいくつかの基本的なポイントを見逃しました。与えられたコード スニペットを修正する方法と、私が見逃したものを
教えてください。

import React from 'react';
import './index.css';

const AppContext = React.createContext();

function GreenBox () {
  return <div className='green-box'>
    <AppContext.Consumer>
      {(context) => context.value}
    </AppContext.Consumer>
  </div>
}
function BlueBox () {
  return <div className='blue-box'><GreenBox/></div>
}
class RedBox extends React.Component {
  render() {
    return <div className='red-box'>
      <AppContext.Consumer>
        {(context) => context.value}
      </AppContext.Consumer>
      <BlueBox/>
      </div>
  }
}

class Context extends React.Component {
  state = {
    number: 10
  }
  render() {
    return (
      <AppContext.Provider value = {this.state.number}>
        <RedBox/>
      </AppContext.Provider>
    )
  }
}

export default Context;