diff --git a/frontend/app/ui/room/ban-item.tsx b/frontend/app/ui/room/ban-item.tsx
index d001fc96..9de2414a 100644
--- a/frontend/app/ui/room/ban-item.tsx
+++ b/frontend/app/ui/room/ban-item.tsx
@@ -26,9 +26,9 @@ export default function BanItem({
   const router = useRouter();
   const [isClicked, setIsClicked] = useState(false);
 
-  const onBan = async (userId: number) => {
+  const ban = async () => {
     setIsClicked(true);
-    const result = await banUser(roomId, userId);
+    const result = await banUser(roomId, user.id);
     if (result === "Success") {
       router.refresh();
     } else {
@@ -48,7 +48,7 @@ export default function BanItem({
       {isClicked && <Loader className="ml-auto" />}
       {!isClicked && (
         <button
-          onClick={() => onBan(user.id)}
+          onClick={ban}
           disabled={isClicked}
           className="text-rose-500 ml-auto"
         >
diff --git a/frontend/app/ui/room/unban-item.tsx b/frontend/app/ui/room/unban-item.tsx
index 550ce76c..49db7199 100644
--- a/frontend/app/ui/room/unban-item.tsx
+++ b/frontend/app/ui/room/unban-item.tsx
@@ -26,9 +26,9 @@ export default function UnbanItem({
   const router = useRouter();
   const [isClicked, setIsClicked] = useState(false);
 
-  const onUnban = async (userId: number) => {
+  const unban = async () => {
     setIsClicked(true);
-    const result = await unbanUser(roomId, userId);
+    const result = await unbanUser(roomId, user.id);
     if (result === "Success") {
       router.refresh();
     } else {
@@ -49,7 +49,7 @@ export default function UnbanItem({
       {isClicked && <Loader className="ml-auto" />}
       {!isClicked && (
         <button
-          onClick={() => onUnban(user.id)}
+          onClick={unban}
           disabled={isClicked}
           className="text-indigo-500 ml-auto"
         >