fix filter with category id

src/app/[name]/(Main)/page.tsx

@@ -16,6 +16,7 @@ import CategoryScroll from "@/app/[name]/(Main)/components/CategoryScroll";
 import MenuFilterDrawer from "@/app/[name]/(Main)/components/MenuFilterDrawer";
 import MenuSortingDrawer from "@/app/[name]/(Main)/components/MenuSortingDrawer";
 import { useGetCategories, useGetFoods } from "./hooks/useMenuData";
+import type { Food, Category } from "./types/Types";
 
 const sortings = [
   "PopularityDescending",
@@ -23,17 +24,14 @@ const sortings = [
   "PriceAscending",
   "RateDescending",
   "PriceDescending"
-]
+];
 
 const MenuIndex = () => {
   const { data: foodsData } = useGetFoods();
   const { data: categoriesData } = useGetCategories();
 
-  const foods = useMemo(() => {
-    const foodsList = foodsData?.data || [];
-    return foodsList;
-  }, [foodsData?.data]);
-  const categories = useMemo(() => categoriesData?.data || [], [categoriesData?.data]);
+  const foods = useMemo<Food[]>(() => foodsData?.data || [], [foodsData?.data]);
+  const categories = useMemo<Category[]>(() => categoriesData?.data || [], [categoriesData?.data]);
   const { t: tCommon } = useTranslation('common');
   const { t: tMenu } = useTranslation('menu', {
     keyPrefix: "Menu"
@@ -103,7 +101,8 @@ const MenuIndex = () => {
 
     return foods.filter(
       (item) => {
-        const matchesCategory = selectedCategory === '0' || item.category === selectedCatId;
+        const matchesCategory =
+          selectedCategory === '0' || item.category?.id === selectedCatId;
         const itemName = item.name || item.title || item.foodName || '';
         const matchesSearch = !search || itemName.toLowerCase().includes(lowerSearch);
         return matchesCategory && matchesSearch;