fix: default value if mode single or multiple

src/App.jsx

@@ -14,15 +14,14 @@ const Testing = () => {
                         Authorization: `Bearer ${token}`,
                     }}
                 >
-{/*                     <ListVirtual
+                    <ListVirtual
                         id="company-select"
                         label="Company"
                         name="name"
                         url="/company"
-                        defaultValue={"442"}
+                        defaultValue={442}
                         size="small"
-                        multiple
+                    /> 
-                    /> */}
                     <ListVirtual
                         label="License Plate"
                         name="license_plate"
@@ -35,7 +34,7 @@ const Testing = () => {
                         }}
                         size="small"
                         filter={[
-                            {name:"company_id",value: "740","logic_operator":"=","operator":"AND"}
+                            {name:"company_id",value: "442","logic_operator":"=","operator":"AND"}
                         ]}
                     />
                 </ApiProvider>

src/components/ListVirtual.jsx

@@ -121,51 +121,58 @@ export default function ListVirtual({
     }
   }, [open]);
 
-  const fetchById = async (id) => {
+  const fetchDefaultValue = async (value) => {
     setLoading(true);
 
-    const payload = new FilterTableBuilder()
+    const payload = new FilterTableBuilder().setPaging(0, lengthData);
-      .setPaging(0, 1)
+
-      .equal("id", id);
+    if (multiple) {
+      payload.in("id", value);        // value = [1,2,3]
+    } else {
+      payload.equal("id", value);     // value = 1
+    }
 
     try {
       const res = await apiRequest.search(
-				url, 
+        url,
-				payload.build(),
+        payload.build(),
         {
-          headers: headersRequest
+          headers: headersRequest,
         },
         isApiGo,
-			);
+      );
 
-      const data = res.data?.[0];
+      const data = res.data || [];
 
-      if (data) {
+      setSelected(multiple ? data : data[0] || null);
-        setSelected(data);
-      }
     } catch (err) {
       console.error(err);
+    } finally {
+      setLoading(false);
     }
-
-    setLoading(false);
   };
 
   useEffect(() => {
-    if (!defaultValue) return;
+    if (defaultValue == null) return;
 
-    if (multiple) {
+    // Already object(s)
-      if (Array.isArray(defaultValue)) {
+    if (typeof defaultValue === "object") {
-        setSelected(defaultValue);
+      if (multiple) {
-      } else {
+        if (
-        setSelected([defaultValue]);
+          Array.isArray(defaultValue) &&
-      }
+          defaultValue.length &&
-    } else {
+          typeof defaultValue[0] === "object"
-      if (Array.isArray(defaultValue)) {
+        ) {
-        setSelected(defaultValue[0] || null);
+          setSelected(defaultValue);
-      } else {
+          return;
+        }
+      } else if (!Array.isArray(defaultValue)) {
         setSelected(defaultValue);
+        return;
       }
     }
+
+    fetchDefaultValue(defaultValue);
   }, [defaultValue, multiple]);
 
   const handleSelect = (row) => {