form action redirects user to tjhe appropriate year

app/ui/LocationCard.tsx

@@ -16,9 +16,9 @@ export const LocationCard:FC<LocationCardProps> = ({location: { _id, name, yearM
 
     // sum all the billAmounts
     const monthlyExpense = bills.reduce((acc, bill) => acc + (bill.payedAmount ?? 0), 0);
-
+    
     return(
-        <div className="card card-compact card-bordered max-w-[30em] bg-base-100 shadow-s my-1">
+        <div data-key={_id } className="card card-compact card-bordered max-w-[30em] bg-base-100 shadow-s my-1">
             <div className="card-body">
                 <Link href={`/location/${_id}/edit`} className="card-subtitle tooltip" data-tip="Edit Location">
                     <Cog8ToothIcon className="h-[1em] w-[1em] absolute cursor-pointer top-3 right-3 text-2xl" />
@@ -26,7 +26,7 @@ export const LocationCard:FC<LocationCardProps> = ({location: { _id, name, yearM
                 <h2 className="card-title mr-[2em]">{formatYearMonth(yearMonth)} {name}</h2>
                 <div className="card-actions">
                     {
-                        bills.map(bill => <BillBadge key={`${bill._id}`} locationId={_id} bill={bill} />)
+                        bills.map(bill => <BillBadge key={`${_id}-${bill._id}`} locationId={_id} bill={bill} />)
                     }
                     <Link href={`/bill/${_id}/add`} className="tooltip" data-tip="Add a new bill">
                         <PlusCircleIcon className="h-[1em] w-[1em] cursor-pointer text-2xl" />