Use zustand and immer

package-lock.json

@@ -6,8 +6,10 @@
     "": {
       "dependencies": {
         "@radix-ui/react-radio-group": "^1.1.3",
+        "immer": "^10.1.1",
         "react": "^18.3.1",
-        "react-dom": "^18.3.1"
+        "react-dom": "^18.3.1",
+        "zustand": "^4.5.2"
       },
       "devDependencies": {
         "@svgr/plugin-svgo": "^8.1.0",
@@ -1927,6 +1929,15 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/immer": {
+      "version": "10.1.1",
+      "resolved": "https://registry.npmjs.org/immer/-/immer-10.1.1.tgz",
+      "integrity": "sha512-s2MPrmjovJcoMaHtx6K11Ra7oD05NT97w1IC5zpMkT6Atjr7H8LjaDd81iIxUYpMKSRRNMJE703M1Fhr/TctHw==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/immer"
+      }
+    },
     "node_modules/import-fresh": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -3221,6 +3232,14 @@
         "browserslist": ">= 4.21.0"
       }
     },
+    "node_modules/use-sync-external-store": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
+      "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -3419,6 +3438,33 @@
       "engines": {
         "node": ">= 14"
       }
+    },
+    "node_modules/zustand": {
+      "version": "4.5.2",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.5.2.tgz",
+      "integrity": "sha512-2cN1tPkDVkwCy5ickKrI7vijSjPksFRfqS6237NzT0vqSsztTNnQdHw9mmN7uBdk3gceVXU0a+21jFzFzAc9+g==",
+      "dependencies": {
+        "use-sync-external-store": "1.2.0"
+      },
+      "engines": {
+        "node": ">=12.7.0"
+      },
+      "peerDependencies": {
+        "@types/react": ">=16.8",
+        "immer": ">=9.0.6",
+        "react": ">=16.8"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "immer": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        }
+      }
     }
   }
 }

package.json

@@ -6,8 +6,10 @@
   },
   "dependencies": {
     "@radix-ui/react-radio-group": "^1.1.3",
+    "immer": "^10.1.1",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "zustand": "^4.5.2"
   },
   "devDependencies": {
     "@svgr/plugin-svgo": "^8.1.0",

src/mainMenu.jsx

@@ -1,12 +1,12 @@
-import { useState } from "react";
 import * as RadioGroup from "@radix-ui/react-radio-group";
 
 import logo from "../assets/logo.svg";
 import Cross from "../assets/icon-x.svg?react";
 import Oval from "../assets/icon-o.svg?react";
+import { useStore, setPlayerOneSymbol } from "./store.jsx";
 
 export default () => {
-  const [playerSymbol, setPlayerSymbol] = useState("cross");
+  const playerOneSymbol = useStore((state) => state.playerOneSymbol);
 
   return (
     <div className="m-6 flex w-full max-w-lg flex-col items-center space-y-10">
@@ -17,9 +17,8 @@ export default () => {
         </h2>
         <RadioGroup.Root
           className="mb-4 flex h-20 w-full items-center justify-between rounded-xl bg-navy-700 p-2"
-          defaultValue="cross"
+          value={playerOneSymbol}
-          value={playerSymbol}
+          onValueChange={setPlayerOneSymbol}
-          onValueChange={setPlayerSymbol}
           loop={false}
         >
           {[

src/store.jsx

@@ -0,0 +1,8 @@
+import { create } from "zustand";
+
+export const useStore = create((set) => ({
+  playerOneSymbol: "cross",
+}));
+
+export const setPlayerOneSymbol = (playerOneSymbol) =>
+  useStore.setState(() => ({ playerOneSymbol }));