mobx state not updating

When I click on the button titled increment,I want the count to get incremented and reflect the change. The state variable "count" is not getting incremented on click. What am I missing?

The App file looks like this:

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;

Context file looks like this:./stores/CounterStore.tsx

import { observable } from 'mobx';import { createContext } from "react";class CounterStore {    @observable count = 1;}export const CounterStoreContext = createContext(new CounterStore());