fix: ts fix

app/letters/filter-year-browser.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useMemo, useRef, useEffect } from "react";
+import { useState, useMemo, useRef } from "react";
 import Link from "next/link";
 import { Card, CardContent } from "@/components/ui/card";
 import { buttonVariants } from "@/components/ui/button";
@@ -402,21 +402,18 @@ export function FilterYearBrowser({
 }) {
   const yearGroups = useMemo(() => buildYearGroups(letters), [letters]);
 
-  const [activeYear, setActiveYear] = useState<number>(
+  const [activeYearRaw, setActiveYear] = useState<number>(
     yearGroups.length > 0 ? yearGroups[0].year : 0,
   );
 
-  const contentRef = useRef<HTMLDivElement>(null);
+  // Derive a safe active year — if the raw value is no longer valid, fall back to the first group
+  const activeYear = useMemo(() => {
+    if (yearGroups.length === 0) return activeYearRaw;
+    if (yearGroups.find((g) => g.year === activeYearRaw)) return activeYearRaw;
+    return yearGroups[0].year;
+  }, [yearGroups, activeYearRaw]);
 
-  // Keep active year valid
+  const contentRef = useRef<HTMLDivElement>(null);
-  useEffect(() => {
-    if (
-      yearGroups.length > 0 &&
-      !yearGroups.find((g) => g.year === activeYear)
-    ) {
-      setActiveYear(yearGroups[0].year);
-    }
-  }, [yearGroups, activeYear]);
 
   const handleYearSelect = (year: number) => {
     setActiveYear(year);

app/letters/year/[year]/year-month-browser.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useMemo, useRef, useEffect } from "react";
+import { useState, useMemo, useRef } from "react";
 import Link from "next/link";
 import { Card, CardContent } from "@/components/ui/card";
 import { buttonVariants } from "@/components/ui/button";
@@ -321,21 +321,19 @@ export function YearMonthBrowser({
 }) {
   const allGroups = useMemo(() => buildMonthGroups(letters), [letters]);
 
-  const [activeMonth, setActiveMonth] = useState<number>(
+  const [activeMonthRaw, setActiveMonth] = useState<number>(
     allGroups.length > 0 ? allGroups[0].month : 1,
   );
 
-  const contentRef = useRef<HTMLDivElement>(null);
+  // Derive a safe active month — if the raw value is no longer valid, fall back to the first group
+  const activeMonth = useMemo(() => {
+    if (allGroups.length === 0) return activeMonthRaw;
+    if (allGroups.find((g) => g.month === activeMonthRaw))
+      return activeMonthRaw;
+    return allGroups[0].month;
+  }, [allGroups, activeMonthRaw]);
 
-  // Keep active month valid
+  const contentRef = useRef<HTMLDivElement>(null);
-  useEffect(() => {
-    if (
-      allGroups.length > 0 &&
-      !allGroups.find((g) => g.month === activeMonth)
-    ) {
-      setActiveMonth(allGroups[0].month);
-    }
-  }, [allGroups, activeMonth]);
 
   const handleMonthSelect = (month: number) => {
     setActiveMonth(month);