fixed conditional rendering logic

src/app/StatsList.tsx

@@ -29,17 +29,23 @@ const StatsList = ({
           {title}
         </Heading>
         <Text textAlign="center" fontSize="sm" color="whiteAlpha.800">
-          {groups ? "Updates every 24 hours" : "At time of page load"}
+          {groups !== undefined
+            ? groups >= 0
+              ? "Updates every 24 hours"
+              : ""
+            : "At time of page load"}
         </Text>
       </VStack>
       <Flex w="80%" flexDirection={{ base: "column", md: "row" }} gap={4}>
-        {groups && groups >= 0 ? (
+        {groups !== undefined ? (
-          <SingleStatComponent
+          groups >= 0 ? (
-            loading={loading}
+            <SingleStatComponent
-            title="Groups Bot Helped"
+              loading={loading}
-            error={error}
+              title="Groups Bot Helped"
-            stat={groups}
+              error={error}
-          />
+              stat={groups}
+            />
+          ) : null
         ) : null}
         <SingleStatComponent
           loading={loading}

src/app/api/graphql/route.ts

@@ -8,6 +8,8 @@ interface NextContext {
   params: Promise<Record<string, string>>;
 }
 
+console.log(process.env);
+
 const environment = process.env.NODE_ENV || "development";
 
 const isValidApiKey = (apiKey: string): boolean => {