Javascript mobx状态未更新

当我点击标题为increment的按钮时，我希望计数增加并反映变化。状态变量“count”不会在单击时递增。我错过了什么

应用程序文件如下所示：

App.tsx

import { StatusBar } from 'expo-status-bar';
import React, { useContext, useState }from 'react';
import { Button, StyleSheet, Text, View } from 'react-native';
import { observer } from 'mobx-react-lite';
import { CounterStoreContext } from './stores/CounterStore';


const App = observer(() => {

  const counterStore = useContext(CounterStoreContext);

  return (
    <View style={styles.container}>
      <Text>Heyyy</Text>
      {console.log(counterStore.count)}
      <Text> {counterStore.count}</Text>
      <StatusBar style="auto" />
      <Button title='increment' onPress={() => counterStore.count++}/>
    </View>
  );
});

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

export default App;

import { observable } from 'mobx';
import { createContext } from "react";

class CounterStore {
    @observable count = 1;
}

export const CounterStoreContext = createContext(new CounterStore());