feat: implement lazy loading in SelectInput

src/components/pages/report/finance/tab/DebtSupplierTab.tsx

@@ -33,6 +33,7 @@ import {
 } from '@/components/pages/report/finance/filter/DebtSupplierFilter';
 import { getFilledFormikValuesCount } from '@/lib/formik-helper';
 import ButtonFilter from '@/components/helper/ButtonFilter';
+import { Supplier } from '@/types/api/master-data/supplier';
 
 const DebtSupplierTab = () => {
   // ===== STATE MANAGEMENT =====
@@ -51,10 +52,12 @@ const DebtSupplierTab = () => {
 
   const filterModal = useModal();
 
-  const { options: supplierOptions, isLoadingOptions: isLoadingSuppliers } =
-    useSelect(SupplierApi.basePath, 'id', 'name', '', {
-      limit: 'limit',
-    });
+  const {
+    setInputValue: setSupplierInputValue,
+    options: supplierOptions,
+    isLoadingOptions: isLoadingSupplierOptions,
+    loadMore: loadMoreSuppliers,
+  } = useSelect<Supplier>(SupplierApi.basePath, 'id', 'name');
 
   const dataTypeOptions = useMemo(
     () => [
@@ -610,7 +613,9 @@ const DebtSupplierTab = () => {
                     Array.isArray(val) ? val : val ? [val] : null
                   );
                 }}
-                isLoading={isLoadingSuppliers}
+                onInputChange={setSupplierInputValue}
+                onMenuScrollToBottom={loadMoreSuppliers}
+                isLoading={isLoadingSupplierOptions}
                 isClearable
                 className={{ wrapper: 'w-full' }}
                 isError={