de queue on cancle queue rather than before starting new queue

src/Player.tsx

@@ -49,7 +49,6 @@ export default function Player({
     }
 
     try {
-      await exitMatchmaker(gameMetadata)
       const ticket = await joinMatchmaker(gameMetadata);
       console.log("Queued:", ticket);
     } catch (err) {
@@ -58,10 +57,18 @@ export default function Player({
     }
   }
 
-  function cancelQueue() {
+  async function cancelQueue(
+    selectedGame: string,
+    selectedMode: string
+  ) {
     setIsQueueing(false);
     // Nakama matchmaker tickets auto-expire by default in your setup.
     // If you later add manual ticket cancel RPC, call it here.
+    const gameMetadata = {
+      game: selectedGame,
+      mode: selectedMode,
+    }
+    await exitMatchmaker(gameMetadata)
   }
 
   useEffect(() => {
@@ -246,7 +253,10 @@ export default function Player({
 
                 {/* Cancel button */}
                 <button
-                  onClick={cancelQueue}
+                  onClick={() => cancelQueue(
+                    selectedGame,
+                    selectedMode,
+                  )}
                   style={{
                     marginTop: "10px",
                     padding: "6px 12px",