Expo React Native: undefined is not an object (evaluating 'this.context.state') - reactjs

Question

I am with undefined is not an object (evaluating 'this.context.state') error at my React Native application using Expo.
context/index.js
import React, { Component } from "react";
const MyContext = React.createContext();
class MyProvider extends Component {
state = {
stage: 1,
players:[],
result:''
}
render(){
return(
<>
<MyContext.Provider value={{ state:this.state }}>
{this.props.children}
</MyContext.Provider>
</>
)
}
}
export {
MyProvider, MyContext
}
App.js file:
import { StatusBar } from 'expo-status-bar';
import { Component } from 'react';
import { StyleSheet, Text, View, ScrollView } from 'react-native';
import { MyContext } from './src/context';
import { MainStage } from './src/components/main_stage'
import { UserStage } from './src/components/user_stage'
import { MyProvider } from './src/context';
class App extends Component {
static contextType = MyContext;
render() {
return (
<MyProvider>
<ScrollView>
<View style={styles.container}>
{
this.context.state.stage === 1 ?
<MainStage />
:
<UserStage />
}
</View>
</ScrollView>
</MyProvider>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
export default App
In this App.js i just want to show a different view if the stage value at state object is 1 or 2.
main_stage.js just in case:
import { Text, View } from 'react-native';
const MainStage = () => {
return (
<View>
<Text>This is the main stage.</Text>
</View>
);
}
export default MainStage;
user_stage.js is exactly equal, the difference is just the content at <Text>.
Hope you guys can help me!
I try this and this solution without success at all.