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,9 +58,8 @@ export default function (props: AppealCardProps) {
       });
 
       document.getElementById(`appeal_${props.id}`)?.remove();
-    }
-
-    useToast()({
+    } else {
+      toast({
         description: ((await actionReq.json()) as { error: string }).error,
         duration: 10000,
         status: "error",
@@ -67,6 +67,9 @@ export default function (props: AppealCardProps) {
       });
     }
 
+    onClose();
+  }
+
   return (
     <Card id={`appeal_${props.user.id}`} w="100%">
       <Modal isOpen={isOpen} onClose={onClose}>