Linked navigation functions to navigation buttons. Calender layout props are not updating properly.

components/calender/CalenderNav.tsx

@@ -5,15 +5,16 @@ import { format } from "date-fns";
 import { CalenderContext } from "../../contexts/CalenderContext";
 
 const CalenderNav = (): JSX.Element => {
-  const { today } = useContext(CalenderContext);
+  const { selectedMonth, prevMonth, nextMonth } = useContext(CalenderContext);
 
-  const currentMonth = format(today, "LLLL uuuu");
+  const currentMonth = format(selectedMonth, "LLLL uuuu");
 
   return (
     <HStack spacing={10} as="nav" w="auto" h="10vh" textAlign="center">
       <IconButton
         aria-label="Previous Month"
         icon={<Icon icon="akar-icons:chevron-left" />}
+        onClick={() => prevMonth()}
       />
       <Heading w="100%" h="auto">
         {currentMonth}
@@ -21,6 +22,7 @@ const CalenderNav = (): JSX.Element => {
       <IconButton
         aria-label="Next Month"
         icon={<Icon icon="akar-icons:chevron-right" />}
+        onClick={() => nextMonth()}
       />
     </HStack>
   );

contexts/CalenderContext.tsx

@@ -11,15 +11,14 @@ type days =
   | "Friday"
   | "Saturday";
 
-  interface DaysOfWeek {
-    startOfWeek: {
-      Sunday: days[];
-      Monday: days[];
-    };
-  }
+interface DaysOfWeek {
+  startOfWeek: {
+    Sunday: days[];
+    Monday: days[];
+  };
+}
 
 interface CalenderContextState {
-  today: Date;
   selectedMonth: Date;
   daysOfMonth: [number] | [null];
   daysOfWeek: DaysOfWeek;
@@ -65,7 +64,7 @@ const CalenderContextProvider = ({
 
       setDaysOfMonth(newDaysOfMonth);
     }
-  }, [selectedMonth, lastDayOfCurrMonth]);
+  }, [selectedMonth, lastDayOfSelectedMonth]);
 
   // Update selected month sates when the selected month is updated.
   useEffect(() => {
@@ -106,23 +105,22 @@ const CalenderContextProvider = ({
 
   // Navigation
   const prevMonth = (): void => {
-    const newMonth = sub(today, {
-      years: 1,
+    const newMonth = sub(selectedMonth, {
+      months: 1,
     });
 
     setSelectedMonth(newMonth);
   };
 
   const nextMonth = (): void => {
-    const newMonth = add(today, {
-      years: 1,
+    const newMonth = add(selectedMonth, {
+      months: 1,
     });
 
     setSelectedMonth(newMonth);
   };
 
   const calenderContextValues = {
-    today,
     selectedMonth,
     daysOfMonth,
     daysOfWeek,