fix: implement infinite scroll in select input

src/components/pages/report/marketing/tab/HppPerKandangTab.tsx

@@ -71,24 +71,32 @@ const HppPerKandangTab = ({ tabId }: HppPerKandangTabProps) => {
   const filterModal = useModal();
 
   // ===== OPTIONS =====
-  const { options: areaOptions, isLoadingOptions: isLoadingAreas } = useSelect(
+  const {
-    AreaApi.basePath,
+    options: areaOptions,
+    isLoadingOptions: isLoadingAreas,
+    setInputValue: setAreaInputValue,
+    loadMore: loadMoreArea,
+  } = useSelect(AreaApi.basePath, 'id', 'name', 'search');
+
+  const {
+    options: locationOptions,
+    isLoadingOptions: isLoadingLocations,
+    setInputValue: setLocationInputValue,
+    loadMore: loadMoreLocation,
+  } = useSelect(LocationApi.basePath, 'id', 'name', 'search');
+
+  const {
+    options: kandangOptions,
+    isLoadingOptions: isLoadingKandangs,
+    setInputValue: setKandangInputValue,
+    loadMore: loadMoreKandang,
+  } = useSelect(
+    ProjectFlockKandangApi.basePath,
     'id',
-    'name',
+    'name_with_period',
     'search'
   );
 
-  const { options: locationOptions, isLoadingOptions: isLoadingLocations } =
-    useSelect(LocationApi.basePath, 'id', 'name', 'search');
-
-  const { options: kandangOptions, isLoadingOptions: isLoadingKandangs } =
-    useSelect(
-      ProjectFlockKandangApi.basePath,
-      'id',
-      'name_with_period',
-      'search'
-    );
-
   const showUnrecordedOptions = useMemo(
     () => [
       { value: 'false', label: 'Sembunyikan' },
@@ -918,6 +926,8 @@ const HppPerKandangTab = ({ tabId }: HppPerKandangTabProps) => {
               isLoading={isLoadingAreas}
               isClearable
               className={{ wrapper: 'w-full' }}
+              onInputChange={setAreaInputValue}
+              onMenuScrollToBottom={loadMoreArea}
             />
 
             {/* Location Filter */}
@@ -937,6 +947,8 @@ const HppPerKandangTab = ({ tabId }: HppPerKandangTabProps) => {
               isLoading={isLoadingLocations}
               isClearable
               className={{ wrapper: 'w-full' }}
+              onInputChange={setLocationInputValue}
+              onMenuScrollToBottom={loadMoreLocation}
             />
 
             {/* Kandang Filter */}
@@ -956,6 +968,8 @@ const HppPerKandangTab = ({ tabId }: HppPerKandangTabProps) => {
               isLoading={isLoadingKandangs}
               isClearable
               className={{ wrapper: 'w-full' }}
+              onInputChange={setKandangInputValue}
+              onMenuScrollToBottom={loadMoreKandang}
             />
 
             {/* Weight Range Filter */}