Mobx not updating react native element - reactjs

Question

I'm new to react and mobx.
I'm trying to use mobx to update a simple counter and display the count number.
When I click on the button "Add" I can see in the logs that counterStore.count is increasing but counter shown in the <Text></Text> remains equal to 0.
Can you please me tell me what is wrong?
index.tsx
import { observer } from "mobx-react";
import React from "react";
import { Button, StyleSheet, Text, View } from "react-native";
import CounterStore from './stores/CounterStore';
export function App() {
const counterStore = new CounterStore(0);
return (
<View style={styles.container}>
<View style={styles.wrapper}>
<Text>{counterStore.count}</Text>
<Button
title="Add"
onPress={() => {
counterStore.addToCount();
console.log("count = ", counterStore.count);
}}
/>
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignItems: "center",
height: "100%"
},
wrapper: {
backgroundColor: "#F5FCFF",
width: "100%",
maxWidth: 425
}
});
export default observer(App);
CounterStore.ts
import { action, makeObservable, observable } from "mobx";
class CounterStore {
#observable count: number;
constructor(count: number){
this.count = count
makeObservable(this);
}
#action
addToCount(){
this.count++;
}
}
export default CounterStore;
Output & Logs
output

Answer 1

I tried to improve my code based on Jay Vaghasiya's answer, but still got the same behaviour.
CounterStore.ts
import { action, makeObservable, observable } from "mobx";
import React from "react";
class CounterStore {
count = 0;
constructor(){
makeObservable(this), {count: observable};
}
#action
addToCount(){
this.count++;
}
}
export const CounterStoreContext = React.createContext(new CounterStore());
index.tsx
import { observer } from "mobx-react";
import React from "react";
import { Button, StyleSheet, Text, View } from "react-native";
import { CounterStoreContext } from './stores/CounterStore';
const App = observer(() => {
const counterStore = React.useContext(CounterStoreContext);
return (
<View style={styles.container}>
<Text>{counterStore.count}</Text>
<Button
title="Add"
onPress={() => {
counterStore.addToCount();
console.log("count = ", counterStore.count);
}}
/>
</View>
);
});
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignItems: "center",
height: "100%",
},
wrapper: {
backgroundColor: "#F5FCFF",
width: "100%",
maxWidth: 425
}
});
export default App;