useEffect for managing match udpate

src/tictactoe/TicTacToe.tsx

@@ -4,7 +4,6 @@ import Board from "./Board";
 
 export default function TicTacToe() {
   const [username, setUsername] = useState("");
-
   const [board, setBoard] = useState<string[][]>([
     ["", "", ""],
     ["", "", ""],
@@ -21,6 +20,18 @@ export default function TicTacToe() {
     matchId,
   } = useNakama();
 
+  useEffect(() => {
+    onMatchData((msg) => {
+      console.log("[Match Data]", msg);
+
+      if (msg.opCode === 2) {
+        setBoard(msg.data.board);
+        setTurn(msg.data.turn);
+        setWinner(msg.data.winner || null);
+      }
+    });
+  }, [onMatchData]);
+
   // ------------------------------------------
   // CONNECT
   // ------------------------------------------