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>
   );