Make dynamic updating work on events team page

app/routes/events-team.tsx

@@ -23,7 +23,7 @@ import {
   VStack,
 } from "@chakra-ui/react";
 import { useLoaderData } from "@remix-run/react";
-import { type ReactNode, useState } from "react";
+import { useState } from "react";
 
 export async function loader({ context }: { context: RequestContext }) {
   if (!context.data.current_user)
@@ -83,7 +83,6 @@ export default function () {
     members: { id: string; name: string }[];
   } = useLoaderData<typeof loader>();
   const [eventData, setEventData] = useState(events);
-  const eventCards: ReactNode[] = [];
   const { isOpen, onClose, onOpen } = useDisclosure();
   const toast = useToast();
   const [selectedEvent, setSelectedEvent] = useState("");
@@ -176,12 +175,43 @@ export default function () {
     setEventData(newEventData);
   }
 
-  for (const event of eventData) {
+  return (
+    <Container maxW="container.lg">
+      <Modal isOpen={isOpen} onClose={onClose}>
+        <ModalOverlay />
+        <ModalContent>
+          <ModalHeader>Certify Game Night</ModalHeader>
+          <ModalCloseButton />
+          <ModalBody>
+            <Text>
+              By certifying this game night, you confirm that the minimum number
+              of players was met and you were provided proof.
+            </Text>
+          </ModalBody>
+          <ModalFooter>
+            <Button colorScheme="red" onClick={onClose}>
+              Cancel
+            </Button>
+            <Button
+              colorScheme="blue"
+              ml="8px"
+              onClick={async () => {
+                await certify(selectedEvent);
+                onClose();
+              }}
+            >
+              Certify
+            </Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+      <VStack spacing="8">
+        {eventData.map((event) => {
           const eventCreatorName = members.find(
             (member) => member.id === event.created_by,
           )?.name;
 
-    eventCards.push(
+          return (
             <Card w="100%">
               <CardBody>
                 <Stack divider={<StackDivider />} spacing="4">
@@ -258,44 +288,17 @@ export default function () {
                 </Flex>
                 <Text alignSelf="center" fontSize="sm">
                   Status:{" "}
-            {event.pending ? "Pending" : event.approved ? "Approved" : "Denied"}
+                  {event.pending
+                    ? "Pending"
+                    : event.approved
+                      ? "Approved"
+                      : "Denied"}
                 </Text>
               </CardFooter>
-      </Card>,
+            </Card>
           );
-  }
-
-  return (
-    <Container maxW="container.lg">
-      <Modal isOpen={isOpen} onClose={onClose}>
-        <ModalOverlay />
-        <ModalContent>
-          <ModalHeader>Certify Game Night</ModalHeader>
-          <ModalCloseButton />
-          <ModalBody>
-            <Text>
-              By certifying this game night, you confirm that the minimum number
-              of players was met and you were provided proof.
-            </Text>
-          </ModalBody>
-          <ModalFooter>
-            <Button colorScheme="red" onClick={onClose}>
-              Cancel
-            </Button>
-            <Button
-              colorScheme="blue"
-              ml="8px"
-              onClick={async () => {
-                await certify(selectedEvent);
-                onClose();
-              }}
-            >
-              Certify
-            </Button>
-          </ModalFooter>
-        </ModalContent>
-      </Modal>
-      <VStack spacing="8">{eventCards}</VStack>
+        })}
+      </VStack>
       <VStack alignItems="start" gap="8px" my="16px">
         <Link color="#646cff" href="/book-event" mt="16px">
           Book an Event