fix: some duplications and tags

src/app/[name]/page.tsx

@@ -155,37 +155,37 @@ const MenuIndex = () => {
   const wrapperRef: React.RefObject<HTMLDivElement | null> = useRef(null);
   const [smallCategoriesVisible, setSmallCategoriesVisibility] = useState(false);
 
-  useEffect(() => {
-    let m_wrapperRef = null;
-    if (wrapperRef.current) {
-      m_wrapperRef = wrapperRef;
-      wrapperRef.current?.parentElement?.addEventListener('scroll', onScroll);
-    }
-
-    return () => {
-      if (m_wrapperRef?.current)
-        m_wrapperRef.current?.parentElement?.removeEventListener('scroll', onScroll)
-    }
-  })
-
-  const onScroll = () => {
+  const onScroll = useCallback(() => {
     if (!wrapperRef?.current?.parentElement?.scrollTop || !smallCategoriesRef.current?.offsetTop) return;
-    if (wrapperRef?.current?.parentElement?.scrollTop >= smallCategoriesRef.current?.offsetTop) {
+
+    if (wrapperRef.current.parentElement.scrollTop >= smallCategoriesRef.current.offsetTop) {
       setSmallCategoriesVisibility(true);
     } else {
       setSmallCategoriesVisibility(false);
     }
-  }
+  }, [wrapperRef, smallCategoriesRef]);
+
+  useEffect(() => {
+    if (!wrapperRef.current) return;
+
+    const parent = wrapperRef.current.parentElement;
+    if (!parent) return;
+
+    parent.addEventListener('scroll', onScroll);
+
+    return () => {
+      parent.removeEventListener('scroll', onScroll);
+    }
+  }, [onScroll]);
+
 
   const updateSearch = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
     setSearch(e.target.value);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [setSearch]);
 
   const updateCategory = useCallback((id: number) => {
     setSelectedCategory(String(id));
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [setSelectedCategory]);
 
   const toggleFilterModal = useCallback(() => {
     setFilterModal((state) => !state);
@@ -242,7 +242,6 @@ const MenuIndex = () => {
       </HorizontalScrollView>
 
       <section className="w-full">
-
         <div className="flex justify-between items-center relative" ref={smallCategoriesRef} >
           <span className="text-base font-medium">
             {categories[+selectedCategory]?.title}