Reactjs 反应本机&；MobX:useContext不'；t将更改重新渲染到屏幕上

我一直在尝试使用mobX应用于React本机功能组件。 所以我使用这两个库-mobx和mobx-react-lite

我制作了一个简单的计数器应用程序，我还使用了上下文挂钩。 增加该值后，它不会在屏幕上应用。然而，它出现在我的控制台上。 在我通过保存刷新代码后，更改显示在屏幕上（我没有更改代码）

我如何解决这个问题

App.js

import { StyleSheet, Text, View,Button } from 'react-native';
import { CounterStoreContext } from './components/CounterStore';
  
import { observer } from "mobx-react-lite";
import React, { useContext, useState } from "react";

const App = observer(() => {
  // const [count, setCount] = useState(0);
  const counterStore = useContext(CounterStoreContext)
  return (
    <View style={styles.container}>
      <Text style={styles.welcome}>Welcome</Text>
      <Text style={styles.text}>Just Press the damn button</Text>
      {/* <Text style={styles.text}>{count}</Text> */}
      {/* <Button title="Increase" onPress={()=>{setCount(count+1)}}/> */}
      <Text style={styles.text}>{counterStore.count}</Text>
      <Button title="Increase" onPress={()=>{
        counterStore.count++;
        console.log(counterStore.count)
        // setCount(counterStore.count)
      }}/>      
    </View>
  );
})

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  welcome:{
    fontSize: 20,
    fontWeight: 'bold',
    textAlign: 'center',
  },
  text:{
    fontSize: 14,
    textAlign: 'center',
  },
});

export default App;

。您还需要在构造函数中使用/

class CounterStore {
    @observable count = 0;

    constructor() {
        makeAutoObservable(this);
    }
}

class CounterStore {
    @observable count = 0;

    constructor() {
        makeAutoObservable(this);
    }
}