diff --git a/examples/with-mobx/.babelrc b/examples/with-mobx/.babelrc
index 93a29a8387362..df448a053ed45 100644
--- a/examples/with-mobx/.babelrc
+++ b/examples/with-mobx/.babelrc
@@ -2,6 +2,6 @@
   "presets": ["next/babel"],
   "plugins": [
     ["@babel/plugin-proposal-decorators", { "legacy": true }],
-    ["@babel/plugin-proposal-class-properties", { "loose": true }]
+    ["@babel/plugin-proposal-class-properties", { "loose": false }]
   ]
 }
diff --git a/examples/with-mobx/package.json b/examples/with-mobx/package.json
index 200eb69a0201c..c00b6db45e790 100644
--- a/examples/with-mobx/package.json
+++ b/examples/with-mobx/package.json
@@ -7,8 +7,8 @@
     "start": "next start"
   },
   "dependencies": {
-    "mobx": "^5.15.4",
-    "mobx-react": "^6.2.2",
+    "mobx": "^6.0.1",
+    "mobx-react": "^7.0.0",
     "next": "latest",
     "react": "^16.13.1",
     "react-dom": "^16.13.1"
diff --git a/examples/with-mobx/store.js b/examples/with-mobx/store.js
index d9b802b0de11f..36c0486aa487a 100644
--- a/examples/with-mobx/store.js
+++ b/examples/with-mobx/store.js
@@ -1,12 +1,16 @@
-import { action, observable, computed, runInAction } from 'mobx'
-import { useStaticRendering } from 'mobx-react'
+import { action, observable, computed, runInAction, makeObservable } from 'mobx'
+import { enableStaticRendering } from 'mobx-react'
 import { useMemo } from 'react'
 // eslint-disable-next-line react-hooks/rules-of-hooks
-useStaticRendering(typeof window === 'undefined')
+enableStaticRendering(typeof window === 'undefined')
 
 let store
 
 class Store {
+  constructor() {
+    makeObservable(this)
+  }
+
   @observable lastUpdate = 0
   @observable light = false