Hopefully make accordion update

app/routes/events-calendar.tsx

@@ -70,15 +70,14 @@ export async function loader({ context }: { context: RequestContext }) {
 export default function () {
   const data = useLoaderData<typeof loader>();
   const [selectedDate, setDate] = useState(new Date());
-
-  const eventsOfDay = () => {
-    return data.eventList.filter(
+  const getEventsOfDay = (date: Date) =>
+    data.eventList.filter(
       (e) =>
-        e.day === selectedDate.getUTCDate() &&
-        e.month === selectedDate.getUTCMonth() + 1 &&
-        e.year === selectedDate.getUTCFullYear(),
+        e.day === date.getUTCDate() &&
+        e.month === date.getUTCMonth() + 1 &&
+        e.year === date.getUTCFullYear(),
     ) as { [k: string]: any }[];
-  };
+  const [eventsOfDay, setEventsOfDay] = useState(getEventsOfDay(selectedDate));
 
   dayjs.extend(utc);
 
@@ -89,15 +88,12 @@ export default function () {
         events={data.calendarData}
         localizer={dayjsLocalizer(dayjs)}
         onSelectSlot={(s) => {
-          setDate(s.slots.at(0) as Date);
+          const date = s.slots.at(0) as Date;
+          setDate(date);
+          setEventsOfDay(getEventsOfDay(date));
         }}
         popup
-        startAccessor={(event) => {
-          const date = new Date(event.start);
-          date.setUTCDate(date.getUTCDate() + 1);
-
-          return date;
-        }}
+        startAccessor={(event) => new Date(event.start)}
         style={{ height: 500 }}
         views={{
           month: true,
@@ -118,7 +114,7 @@ export default function () {
             </AccordionButton>
           </h2>
           <AccordionPanel pb={4}>
-            {eventsOfDay().find((e) => e.type === "fotd")?.details || "None"}
+            {eventsOfDay.find((e) => e.type === "fotd")?.details || "None"}
             <br />
           </AccordionPanel>
         </AccordionItem>
@@ -132,8 +128,7 @@ export default function () {
             </AccordionButton>
           </h2>
           <AccordionPanel pb={4}>
-            {eventsOfDay().find((e) => e.type === "gamenight")?.details ||
-              "None"}
+            {eventsOfDay.find((e) => e.type === "gamenight")?.details || "None"}
           </AccordionPanel>
         </AccordionItem>
         <AccordionItem>
@@ -145,7 +140,7 @@ export default function () {
             </AccordionButton>
           </h2>
           <AccordionPanel pb={4}>
-            {eventsOfDay().find((e) => e.type === "rotw")?.details || "None"}
+            {eventsOfDay.find((e) => e.type === "rotw")?.details || "None"}
           </AccordionPanel>
         </AccordionItem>
         <AccordionItem>
@@ -157,7 +152,7 @@ export default function () {
             </AccordionButton>
           </h2>
           <AccordionPanel pb={4}>
-            {eventsOfDay().find((e) => e.type === "qotd")?.details || "None"}
+            {eventsOfDay.find((e) => e.type === "qotd")?.details || "None"}
           </AccordionPanel>
         </AccordionItem>
       </Accordion>