diff --git a/components/NewGameBan.tsx b/components/NewGameBan.tsx
index cc50ab5..39f5cc6 100644
--- a/components/NewGameBan.tsx
+++ b/components/NewGameBan.tsx
@@ -27,6 +27,7 @@ import { type ReactElement, useState } from "react";
 export default function (props: { isOpen: boolean; onClose: () => void }) {
   const actionMap: { [k: string]: number } = {};
   const [rows, setRows] = useState([] as ReactElement[]);
+  const [users, setUsers] = useState([] as string[]);
   const toast = useToast();
   const fileTypes: { [k: string]: string } = {
     gif: "image/gif",
@@ -46,6 +47,9 @@ export default function (props: { isOpen: boolean; onClose: () => void }) {
   };
 
   function addUser(user: string) {
+    const newUsers = [...users];
+    newUsers.push(user);
+
     const newRows = [...rows];
     newRows.push(
       <Tr key={user}>
@@ -71,20 +75,21 @@ export default function (props: { isOpen: boolean; onClose: () => void }) {
       </Tr>,
     );
 
+    setUsers(newUsers);
     setRows(newRows);
   }
 
   function removeUser(user: string) {
-    const newRows = [...rows];
-    const el = newRows.find((el) => el.key === user);
+    const newUsers = [...users];
+    const userIdx = newUsers.indexOf(user);
 
-    if (!el) return;
+    if (userIdx === -1) return;
 
-    const elIdx = newRows.indexOf(el);
-
-    if (elIdx === -1) return;
+    const newRows = [...rows];
 
-    newRows.splice(elIdx, 1);
+    newUsers.splice(userIdx, 1);
+    newRows.splice(userIdx, 1);
+    setUsers(newUsers);
     setRows(newRows);
 
     delete actionMap[user];