Полное объяснение API контекста в React Native

Я немного запутался в том, как работает Context API

как говорится в документах о Поставщик контекста:

Accepts a value prop to be passed to consuming components that are descendants of this Provider. One Provider can be connected to many consumers. Providers can be nested to override values deeper within the tree.

Я просто начинаю пробовать такой простой код:

//App.js

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.changeColor=(color, value)=>{
      this.setState({[color]:value})
    }
    this.state = {
      changeColor:this.changeColor,
      red:0,
      green:0,
      blue:0,
    }
  }

  render() {
    console.disableYellowBox = true;
    return (
      <ThemeContext.Provider value = {this.state}>
        <InitialScreen/>
      </ThemeContext.Provider>
    );
  }
}

//InitialScreen.js

export default class Login extends Component {
  render() {
    return (
      <ThemeContext.Consumer>
        {({red, green, blue, changeColor})=>(
          <View style = {{flex:1}}>
            <View style = {{flexDirection:'row', justifyContent:'space-between'}}>
              <Text>Red: </Text>
              <Slider
                style = {{width:'80%'}}
                minimumValue = {0}
                maximumValue = {255}
                step = {1}
                value = {red}
                onValueChange = {(e)=>{changeColor('red', e)}}
              />
            </View>
            <View style = {{flexDirection:'row', justifyContent:'space-between'}}>
              <Text>Green: </Text>
              <Slider
                style = {{width:'80%'}}
                minimumValue = {0}
                maximumValue = {255}
                step = {1}
                value = {green}
                onValueChange = {(e)=>{changeColor('green', e)}}
              />
            </View>
            <View style = {{flexDirection:'row', justifyContent:'space-between'}}>
              <Text>Blue: </Text>
              <Slider
                style = {{width:'80%'}}
                minimumValue = {0}
                maximumValue = {255}
                step = {1}
                value = {blue}
                onValueChange = {(e)=>{changeColor('blue', e)}}
              />
            </View>
            <View style = {[GlobalStyles.Center, {flex:1, backgroundColor:'rgb('+red+', '+green+', '+blue+')'}]}>
            </View>
          </View>
        )}
      </ThemeContext.Consumer>
    );
  }
}

//themeContext.js

import React from 'react';

export const themes = {
  light: {
    foreground: '#000000',
    background: '#eeeeee',
  },
  dark: {
    foreground: '#ffffff',
    background: '#222222',
  },
};

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

Я не знаю, что означает Object внутри React.createContext({...}), я могу передать this.state в Provider value props, это означает, что мне не нужно ничего определять в React.createContext({...}) AFAIK,

или, может быть, я делаю что-то не так, поэтому у меня не работает сама функция Context?