[example] Fix fast refresh in with-slate example (#36095)

This PR fixes #29740 and updates the with-slate example to match slates latest version.

[more info](https://docs.slatejs.org/walkthroughs/01-installing-slate)

## Bug

- [x] Related issues linked using `fixes #number`

## Documentation / Examples

- [x] Make sure the linting passes by running `yarn lint`


Co-authored-by: JJ Kasper <[email protected]>

Author: HaNdTriX

examples/with-slate/package.json

@@ -7,10 +7,10 @@
   },
   "dependencies": {
     "next": "latest",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "slate": "^0.58.4",
-    "slate-history": "0.58.4",
-    "slate-react": "^0.58.4"
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "slate": "^0.76.1",
+    "slate-history": "0.66.0",
+    "slate-react": "^0.76.1"
   }
 }

examples/with-slate/pages/index.js

@@ -1,24 +1,21 @@
-import React, { useState, useMemo } from 'react'
+import { useState } from 'react'
 import { createEditor } from 'slate'
 import { Slate, Editable, withReact } from 'slate-react'
 import { withHistory } from 'slate-history'
 
-const IndexPage = () => {
-  const [value, setValue] = useState(initialValue)
-  const editor = useMemo(() => withHistory(withReact(createEditor())), [])
+export default function IndexPage() {
+  const [editor] = useState(() => withReact(withHistory(createEditor())), [])
+  const [value, setValue] = useState([
+    {
+      children: [
+        { text: 'This is editable plain text, just like a <textarea>!' },
+      ],
+    },
+  ])
+
   return (
-    <Slate editor={editor} value={value} onChange={(value) => setValue(value)}>
+    <Slate editor={editor} value={value} onChange={setValue}>
       <Editable placeholder="Enter some plain text..." />
     </Slate>
   )
 }
-
-const initialValue = [
-  {
-    children: [
-      { text: 'This is editable plain text, just like a <textarea>!' },
-    ],
-  },
-]
-
-export default IndexPage