fix pagination bug

src/components/Input.tsx

@@ -1,5 +1,5 @@
 import { SearchNormal } from "iconsax-react";
-import { FC, InputHTMLAttributes, useEffect, useState } from "react";
+import { FC, InputHTMLAttributes, useEffect, useRef, useState } from "react";
 import EyeIcon from "../assets/images/eye.svg";
 import { clx } from "../helpers/utils";
 import Error from "./Error";
@@ -30,6 +30,8 @@ const Input: FC<Props> = (props: Props) => {
 
   const [showPassword, setShowPassword] = useState<boolean>(false);
   const [search, setSearch] = useState<string>("");
+  const onChangeSearchFinalRef = useRef(props.onChangeSearchFinal);
+  onChangeSearchFinalRef.current = props.onChangeSearchFinal;
 
   const inputClass = clx(
     "w-full h-10 text-black block px-4 text-xs rounded-xl border border-border",
@@ -68,13 +70,13 @@ const Input: FC<Props> = (props: Props) => {
   }, [props.value]);
 
   useEffect(() => {
-    if (props.variant === "search" && props.onChangeSearchFinal) {
-      const timeout = setTimeout(() => {
-        props.onChangeSearchFinal?.(search);
-      }, 1000);
-      return () => clearTimeout(timeout);
-    }
-  }, [search, props]);
+    if (props.variant !== "search" || !onChangeSearchFinalRef.current) return;
+
+    const timeout = setTimeout(() => {
+      onChangeSearchFinalRef.current?.(search);
+    }, 1000);
+    return () => clearTimeout(timeout);
+  }, [search, props.variant]);
 
   return (
     <div className="w-full">

src/pages/customer/List.tsx

@@ -19,7 +19,9 @@ const CustomerList: FC = () => {
   const getCustomers = useGetCustomers(page, limit, false, search);
 
   const handleSearch = (value: string) => {
-    setPage(1);
+    if (value !== search) {
+      setPage(1);
+    }
     setSearch(value);
   };