Fix hydration issues with date string

components/AppealCard.tsx

@@ -10,6 +10,7 @@ import {
   StackDivider,
   Text,
 } from "@chakra-ui/react";
+import { useEffect, useState } from "react";
 
 export default function (props: {
   ban_reason: string;
@@ -20,6 +21,14 @@ export default function (props: {
   reason_for_unban: string;
   username: string;
 }) {
+  const [dateString, setDateString] = useState(
+    new Date(props.createdAt).toUTCString()
+  );
+
+  useEffect(() => {
+    setDateString(new Date(props.createdAt).toLocaleString());
+  }, [props.createdAt]);
+
   return (
     <>
       <Card>
@@ -46,13 +55,15 @@ export default function (props: {
             </Box>
             <Box>
               <Button colorScheme="red">Deny</Button>
-              <Button colorScheme="blue" ml="8px">Accept</Button>
+              <Button colorScheme="blue" ml="8px">
+                Accept
+              </Button>
             </Box>
           </Stack>
         </CardBody>
         <CardFooter>
           <Text fontSize="xs">
-            Submitted at: {new Date(props.createdAt).toLocaleString()}
+            Submitted at: {dateString}
             <br />
             ID: {props.id}
           </Text>