Fix potential hook issue

components/AppealCard.tsx

@@ -27,6 +27,7 @@ export default function (props: AppealCardProps) {
   );
   const [action, setAction] = useState("");
   const [feedback, setFeedback] = useState("");
+  const toast = useToast();
 
   useEffect(() => {
     setDateString(new Date(props.created_at).toLocaleString());
@@ -49,7 +50,7 @@ export default function (props: AppealCardProps) {
     });
 
     if (actionReq.ok) {
-      useToast()({
+      toast({
         description: `Appeal ${action === "accept" ? "accepted" : "denied"}`,
         duration: 5000,
         status: "success",
@@ -57,14 +58,16 @@ export default function (props: AppealCardProps) {
       });
 
       document.getElementById(`appeal_${props.id}`)?.remove();
+    } else {
+      toast({
+        description: ((await actionReq.json()) as { error: string }).error,
+        duration: 10000,
+        status: "error",
+        title: "Oops!",
+      });
     }
 
-    useToast()({
+    onClose();
-      description: ((await actionReq.json()) as { error: string }).error,
-      duration: 10000,
-      status: "error",
-      title: "Oops!",
-    });
   }
 
   return (