improved re-render time when expanding month

app/ui/MonthCard.tsx

@@ -4,23 +4,23 @@ import { FC, useEffect, useRef } from "react";
 import { formatYearMonth } from "../lib/format";
 import { YearMonth } from "../lib/db-types";
 import { formatCurrency } from "../lib/formatStrings";
-import { useRouter } from "next/navigation";
+
 
 export interface MonthCardProps {
     yearMonth: YearMonth,
     children?: React.ReactNode,
     monthlyExpense:number,
-    expanded?:boolean
+    expanded?:boolean,
+    onToggle: (yearMonth:YearMonth) => void
 }
 
-export const MonthCard:FC<MonthCardProps> = ({ yearMonth, children, monthlyExpense, expanded }) => {
+export const MonthCard:FC<MonthCardProps> = ({ yearMonth, children, monthlyExpense, expanded, onToggle }) => {
 
-  const router = useRouter();
   const elRef = useRef<HTMLDivElement>(null);
 
   // Setting the `month` will activate the accordion belonging to that month
   // If the accordion is already active, it will collapse it
-  const handleChange = (event:any) => router.push(expanded ? `/?year=${yearMonth.year}` : `/?year=${yearMonth.year}&month=${yearMonth.month}`);
+  const handleChange = (event:any) => onToggle(yearMonth);
 
   useEffect(() => {
     if(expanded && elRef.current) {