Fix page

Author: Electroid

src/content/learn/updating-objects-in-state.md

@@ -674,12 +674,11 @@ The `draft` provided by Immer is a special type of object, called a [Proxy](http
 
 To try Immer:
 
-1. <TabTerminalBlock 
-  tabs={[
-    { label: 'npm', value: 'npm', content: 'npm install use-immer' },
-    { label: 'Bun', value: 'bun', content: 'bun add use-immer' }
-  ]}
-/>
+1. Install the package:
+```bash
+npm install use-immer
+```
+
 2. Then replace `import { useState } from 'react'` with `import { useImmer } from 'use-immer'`
 
 Here is the above example converted to Immer:
@@ -1288,6 +1287,24 @@ body { height: 280px; }
 select { margin-bottom: 10px; }
 ```
 
+```json package.json
+{
+  "dependencies": {
+    "immer": "1.7.3",
+    "react": "latest",
+    "react-dom": "latest",
+    "react-scripts": "latest",
+    "use-immer": "0.5.1"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}
+```
+
 </Sandpack>
 
 </Solution>
@@ -1316,8 +1333,13 @@ export default function Canvas() {
   });
 
   function handleMove(dx, dy) {
-    shape.position.x += dx;
-    shape.position.y += dy;
+    setShape({
+      ...shape,
+      position: {
+        x: shape.position.x + dx,
+        y: shape.position.y + dy,
+      }
+    });
   }
 
   function handleColorChange(e) {