diff --git a/src/components/dapp/TransactionButton.tsx b/src/components/dapp/TransactionButton.tsx
index 5147e21b1..43b5ce4ed 100644
--- a/src/components/dapp/TransactionButton.tsx
+++ b/src/components/dapp/TransactionButton.tsx
@@ -20,6 +20,7 @@ export type TransactionButtonProps = ButtonProps & {
   onSuccess?: (hash: string) => void;
   onError?: (hash: string) => void;
   onClick?: () => void;
+  shouldResetOnSuccess?: boolean;
 };
 
 export default function TransactionButton({
@@ -32,6 +33,7 @@ export default function TransactionButton({
   enableSponsorCheckbox,
   iconProps,
   onError,
+  shouldResetOnSuccess,
   ...props
 }: TransactionButtonProps) {
   const [status, setStatus] = useState<"idle" | "pending" | "success">("idle");
@@ -43,6 +45,7 @@ export default function TransactionButton({
     sponsorTransactions,
     setSponsorTransactions,
   } = useWalletContext();
+
   const execute = useCallback(async () => {
     if (!tx || !user || !client) return;
 
@@ -129,6 +132,7 @@ export default function TransactionButton({
           state: "good",
           loading: false,
         });
+        if (!!shouldResetOnSuccess) setStatus("idle");
       }
     } catch (_error) {
       setStatus("idle");
@@ -140,7 +144,7 @@ export default function TransactionButton({
         loading: false,
       });
     }
-  }, [tx, client, user, sendTransaction, onExecute, onSuccess, onError, name, onClick]);
+  }, [tx, client, user, shouldResetOnSuccess, sendTransaction, onExecute, onSuccess, onError, name, onClick]);
 
   //TODO: remove hardcoded chainId check in favor of more integrated and generic implem
   if (enableSponsorCheckbox && chainId === 324)
@@ -159,6 +163,7 @@ export default function TransactionButton({
         }
       </List>
     );
+
   return (
     <Button {...props} onClick={execute} disabled={status === "idle" ? props.disabled : true}>
       {status === "pending" ? (
diff --git a/src/components/extenders/PaginatedSelect.tsx b/src/components/extenders/PaginatedSelect.tsx
new file mode 100644
index 000000000..be7d67f65
--- /dev/null
+++ b/src/components/extenders/PaginatedSelect.tsx
@@ -0,0 +1,273 @@
+import { type ReactNode, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { tv } from "tailwind-variants";
+import useDebounce from "../../hooks/useDebounce";
+import { mergeClass } from "../../utils/css";
+import type { GetSet, Variant } from "../../utils/types";
+import Icon from "../primitives/Icon";
+import InfiniteScroll, { type InfiniteScrollRef } from "../primitives/InfiniteScroll";
+import Input from "../primitives/Input";
+import Text from "../primitives/Text";
+import Group from "./Group";
+import Modal from "./Modal";
+
+const selectStyles = tv({
+  base: [
+    "rounded-sm ease flex items-center focus-visible:outline-main-12 !leading-none justify-between text-nowrap font-text font-normal",
+  ],
+  slots: {
+    dropdown: "outline-0 z-50 origin-top animate-drop animate-stretch mt-sm min-w-[var(--popover-anchor-width)]",
+    item: "rounded-sm flex justify-between items-center gap-md cursor-pointer select-none p-sm outline-offset-0 outline-0 text-nowrap focus-visible:outline-main-12",
+    icon: "flex items-center",
+    value: "flex gap-sm items-center",
+    check: "",
+    prefixLabel: "",
+  },
+  variants: {
+    look: {
+      soft: {
+        base: "bg-main-0 text-main-11 border-1 border-main-0 hover:text-main-12 active:border-main-11",
+        icon: "border-main-0",
+        item: "font-text hover:bg-main-5 data-[active-item]:bg-main-5 active:bg-main-4 text-main-12",
+      },
+      base: {
+        base: "bg-main-0 text-main-11 border-1 border-main-9 hover:text-main-12 active:border-main-11",
+        icon: "border-main-0",
+        item: "font-text hover:bg-main-5 data-[active-item]:bg-main-5 active:bg-main-4 text-main-12",
+      },
+      bold: {
+        base: "bg-main-1 text-main-11 border-1 border-main-0 hover:text-main-12 active:border-main-8",
+        icon: "",
+        item: "font-text hover:bg-main-5 data-[active-item]:bg-main-5 active:bg-main-4 text-main-12",
+        check: "text-accent-10",
+      },
+      tint: {
+        base: "bg-main-5 text-main-11 border-1 border-main-0 hover:text-main-12 active:border-main-8",
+        icon: "",
+        item: "font-text hover:bg-main-3 data-[active-item]:bg-main-6 active:bg-main-5 text-main-12",
+      },
+      hype: {
+        base: "bg-main-8 text-main-12 border-1 border-main-0 hover:bg-main-10 active:border-stroke-11",
+        icon: "",
+        item: "font-text hover:bg-accent-3 data-[active-item]:bg-accent-3 active:bg-accent-4 text-main-12",
+      },
+    },
+    size: {
+      xs: {
+        base: "text-xs",
+        value: "px-sm*2 py-xs*2",
+        icon: "text-sm",
+        item: "px-md text-xs",
+        prefixLabel: "text-xs",
+      },
+      sm: {
+        base: "text-sm",
+        value: "px-md py-sm",
+        icon: "text-base",
+        item: "px-md text-sm",
+        prefixLabel: "text-sm",
+      },
+      md: {
+        base: "text-md",
+        value: "px-md text-md py-md",
+        icon: "text-lg",
+        item: "px-md text-md",
+        prefixLabel: "text-sm",
+      },
+      lg: {
+        base: "text-lg",
+        value: "px-xl/2 py-lg",
+        icon: "text-xl",
+        item: "px-lg text-lg",
+        prefixLabel: "text-base",
+      },
+      xl: {
+        base: "text-xl",
+        value: "px-sm*2 py-lg",
+        icon: "text-xl",
+        item: "px-xl text-xl",
+        prefixLabel: "text-lg",
+      },
+    },
+  },
+  defaultVariants: {
+    look: "base",
+    size: "md",
+  },
+  compoundVariants: [
+    {
+      size: "xs",
+      look: "soft",
+      class: { icon: "!pl-0", value: "!pr-0" },
+    },
+    {
+      size: "sm",
+      look: "soft",
+      class: { icon: "!pl-0", value: "!pr-0" },
+    },
+    {
+      size: "md",
+      look: "soft",
+      class: { icon: "!pl-0", value: "!pr-sm/2" },
+    },
+    {
+      size: "lg",
+      look: "soft",
+      class: { icon: "!pl-0", value: "!pr-md/2" },
+    },
+    {
+      size: "xl",
+      look: "soft",
+      class: { icon: "!pl-0", value: "!pr-lg/2" },
+    },
+  ],
+});
+
+type SelectProps = {
+  size?: Variant<typeof selectStyles, "size">;
+  look?: Variant<typeof selectStyles, "look">;
+  options: { [key in string | number | symbol]: React.ReactNode };
+  defaultValue?: string;
+  placeholder?: string;
+  className?: string;
+  loading?: boolean;
+  onNext?: (release: () => void) => Promise<void> | void;
+  onSearch?: (search: string, release?: () => void) => Promise<void>;
+  state: GetSet<string | undefined>;
+  prefix?: React.ReactNode;
+  suffix?: React.ReactNode;
+  error?: ReactNode;
+};
+
+export default function PaginatedSelect({
+  options: optionMap,
+  placeholder = "Select...",
+  look,
+  size,
+  className,
+  state,
+  loading,
+  onNext,
+  onSearch: onSearchProps,
+  prefix,
+  suffix,
+  error,
+}: SelectProps) {
+  const { base, value: valueStyle } = selectStyles({
+    look: look ?? "base",
+    size: size ?? "md",
+  });
+
+  const [search, setSearch] = useState<string>("");
+  const debouncedSearch = useDebounce(search, 500);
+  const [selectedValue, setSelectedValue] = state;
+
+  const handleSelect = useCallback(
+    (key: string) => {
+      setIsModalOpen(false);
+      setSelectedValue(key);
+    },
+    [setSelectedValue],
+  );
+
+  const isSelected = useCallback(
+    (key: string) => {
+      return selectedValue === key;
+    },
+    [selectedValue],
+  );
+
+  const onSearch = useCallback((search: string) => {
+    setSearch(search);
+  }, []);
+
+  useEffect(() => {
+    onSearchProps?.(debouncedSearch);
+  }, [debouncedSearch, onSearchProps]);
+
+  const selectedValueDisplay = useMemo(() => {
+    if (!selectedValue) return;
+    return <Group>{optionMap[selectedValue]}</Group>;
+  }, [selectedValue, optionMap]);
+
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  const renderOptions = useMemo(() => {
+    const options = Object.entries(optionMap);
+    if (!options.length) {
+      const baseText = !!debouncedSearch ? "No result found for " : "No result found ";
+      return (
+        <Text look="soft" className="block text-center mt-lg">
+          {baseText}
+          <Text look="bold" bold>
+            {debouncedSearch}
+          </Text>
+        </Text>
+      );
+    }
+    return options.map(([key, node]) => (
+      <Group
+        key={key}
+        onClick={() => handleSelect(key)}
+        className={mergeClass(
+          "cursor-pointer justify-start w-full py-lg px-xl hover:bg-main-5",
+          isSelected(key) && "bg-main-3",
+        )}
+        size="md">
+        {node}
+      </Group>
+    ));
+  }, [optionMap, debouncedSearch, handleSelect, isSelected]);
+
+  const scrollRef = useRef<InfiniteScrollRef>(null);
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: We release the infinite scroll when new debounced search is made
+  useEffect(() => {
+    scrollRef.current?.release();
+  }, [debouncedSearch]);
+
+  const toggleModal = useCallback(() => setIsModalOpenWrapper(!isModalOpen), [isModalOpen]);
+
+  const setIsModalOpenWrapper = useCallback((bool: boolean) => {
+    setSearch("");
+    setIsModalOpen(bool);
+  }, []);
+
+  const renderSuffix = useMemo(() => {
+    if (selectedValueDisplay) return null;
+    if (loading) return <Icon className="animate-spin" remix="RiLoader4Fill" />;
+    return suffix;
+  }, [suffix, loading, selectedValueDisplay]);
+  return (
+    <>
+      <Modal
+        state={[isModalOpen, setIsModalOpenWrapper]}
+        title={<Text look="bold">Select a token</Text>}
+        modal={
+          <Group className={mergeClass(" overflow-y-hidden")}>
+            <Input
+              type={"string"}
+              state={[search, onSearch]}
+              placeholder={"Search a token"}
+              className="w-full h-[fit-content]"
+              size="lg"
+              prefix={<Icon remix="RiSearch2Line" />}
+            />
+            <InfiniteScroll onNext={onNext} ref={scrollRef}>
+              <div className="overflow-y-auto w-full h-[65vh]">{renderOptions}</div>
+            </InfiniteScroll>
+          </Group>
+        }
+      />
+      <Group className={mergeClass("w-full", className)}>
+        <Group className={mergeClass(base(), "w-full h-[58px] justify-between")} onClick={toggleModal}>
+          <Group className={valueStyle()}>
+            {!selectedValueDisplay && <Group>{prefix}</Group>}
+            <Text>{selectedValueDisplay ?? placeholder}</Text>
+          </Group>
+          <Group className="pr-md">{renderSuffix}</Group>
+        </Group>
+        {error}
+      </Group>
+    </>
+  );
+}
diff --git a/src/components/extenders/Select.tsx b/src/components/extenders/Select.tsx
index 5f788bb81..3e284846c 100644
--- a/src/components/extenders/Select.tsx
+++ b/src/components/extenders/Select.tsx
@@ -186,7 +186,12 @@ export default function Select<
     size: size ?? "md",
   });
 
-  const value = useMemo(() => getter ?? internal, [getter, internal]);
+  const value = useMemo(() => {
+    if (!!getter) return getter;
+    if (!!internal) return internal;
+    if (!!multiple) return [];
+    return "";
+  }, [getter, internal, multiple]);
 
   const setValue = useCallback(
     // biome-ignore lint/suspicious/noExplicitAny: <explanation>
@@ -263,89 +268,91 @@ export default function Select<
         setSearch(value);
       }}
       setOpen={o => o && onOpen?.()}>
-      <Ariakit.SelectProvider
-        setValue={v => setValue(v as Value)}
-        value={value as string}
-        defaultValue={multiple ? [] : undefined}>
-        <Ariakit.Select className={mergeClass(base(), className)}>
-          <div className={valueStyle()}>{label}</div>
-          <div className={icon()}>
-            {loading ? <Icon className="animate-spin" remix="RiLoader4Fill" /> : <Icon remix="RiArrowDropDownLine" />}
-          </div>
-        </Ariakit.Select>
-        <Ariakit.SelectPopover gutter={4} className={dropdown()}>
-          <Box look="bold" size="sm" content="sm">
-            {search && (
-              <div className="combobox-wrapper">
-                <Ariakit.Combobox
-                  autoSelect
-                  placeholder="Search..."
-                  className={mergeClass(inputStyles({ size: "sm", look: "base" }), "w-full", !search && "hidden")}
-                />
-              </div>
-            )}
-            <Scroll vertical className="max-h-[200px] w-full max-w-[90vw] lg:max-w-full">
-              <Ariakit.ComboboxList>
-                {allOption && !searchInput && (
-                  <Ariakit.SelectItem
-                    className={mergeClass(item())}
-                    onClick={() =>
-                      // biome-ignore lint/suspicious/noExplicitAny: template makes this typing difficult even tough it works
-                      setValue((!!multiple ? [] : undefined) as any as Value)
-                    }
-                    render={
-                      <Ariakit.ComboboxItem
-                        children={[
-                          <Group className="flex-nowrap" key="label">
-                            {allOption}
-                          </Group>,
-                          <Icon
-                            key="select"
-                            className={mergeClass(
-                              check(),
-                              !((typeof value === "object" && value?.length === 0) || value === undefined) &&
-                                "opacity-0",
-                            )}
-                            size="sm"
-                            remix="RiCheckFill"
-                          />,
-                        ]}
-                      />
-                    }
+      <Group className={mergeClass("flex-col", className)} size={"xs"}>
+        <Ariakit.SelectProvider
+          setValue={v => setValue(v as Value)}
+          value={value as string}
+          defaultValue={multiple ? [] : undefined}>
+          <Ariakit.Select className={mergeClass(base(), className)}>
+            <div className={valueStyle()}>{label}</div>
+            <div className={icon()}>
+              {loading ? <Icon className="animate-spin" remix="RiLoader4Fill" /> : <Icon remix="RiArrowDropDownLine" />}
+            </div>
+          </Ariakit.Select>
+          <Ariakit.SelectPopover gutter={4} className={dropdown()}>
+            <Box look="bold" size="sm" content="sm">
+              {search && (
+                <div className="combobox-wrapper">
+                  <Ariakit.Combobox
+                    autoSelect
+                    placeholder="Search..."
+                    className={mergeClass(inputStyles({ size: "sm", look: "base" }), "w-full", !search && "hidden")}
                   />
-                )}
-                {matches?.map(_value => (
-                  <Ariakit.SelectItem
-                    key={_value as string}
-                    value={_value as string}
-                    className={mergeClass(item())}
-                    render={
-                      <Ariakit.ComboboxItem
-                        children={[
-                          <Group className="flex-wrap" key="label">
-                            {displayOptions?.[_value as string] ?? options?.[_value as string]}
-                          </Group>,
-                          <Icon
-                            key="select"
-                            className={mergeClass(
-                              check(),
-                              !((typeof value === "object" && value?.includes(_value as T)) || value === _value) &&
-                                "opacity-0",
-                            )}
-                            size="sm"
-                            remix="RiCheckFill"
-                          />,
-                        ]}
-                      />
-                    }
-                  />
-                ))}
-              </Ariakit.ComboboxList>
-            </Scroll>
-          </Box>
-        </Ariakit.SelectPopover>
-      </Ariakit.SelectProvider>
-      {error}
+                </div>
+              )}
+              <Scroll vertical className="max-h-[200px] w-full max-w-[90vw] lg:max-w-full">
+                <Ariakit.ComboboxList>
+                  {allOption && !searchInput && (
+                    <Ariakit.SelectItem
+                      className={mergeClass(item())}
+                      onClick={() =>
+                        // biome-ignore lint/suspicious/noExplicitAny: template makes this typing difficult even tough it works
+                        setValue((!!multiple ? [] : undefined) as any as Value)
+                      }
+                      render={
+                        <Ariakit.ComboboxItem
+                          children={[
+                            <Group className="flex-nowrap" key="label">
+                              {allOption}
+                            </Group>,
+                            <Icon
+                              key="select"
+                              className={mergeClass(
+                                check(),
+                                !((typeof value === "object" && value?.length === 0) || value === undefined) &&
+                                  "opacity-0",
+                              )}
+                              size="sm"
+                              remix="RiCheckFill"
+                            />,
+                          ]}
+                        />
+                      }
+                    />
+                  )}
+                  {matches?.map(_value => (
+                    <Ariakit.SelectItem
+                      key={_value as string}
+                      value={_value as string}
+                      className={mergeClass(item())}
+                      render={
+                        <Ariakit.ComboboxItem
+                          children={[
+                            <Group className="flex-wrap" key="label">
+                              {displayOptions?.[_value as string] ?? options?.[_value as string]}
+                            </Group>,
+                            <Icon
+                              key="select"
+                              className={mergeClass(
+                                check(),
+                                !((typeof value === "object" && value?.includes(_value as T)) || value === _value) &&
+                                  "opacity-0",
+                              )}
+                              size="sm"
+                              remix="RiCheckFill"
+                            />,
+                          ]}
+                        />
+                      }
+                    />
+                  ))}
+                </Ariakit.ComboboxList>
+              </Scroll>
+            </Box>
+          </Ariakit.SelectPopover>
+        </Ariakit.SelectProvider>
+        {error}
+      </Group>
     </Ariakit.ComboboxProvider>
   );
 }
diff --git a/src/components/primitives/InfiniteScroll.tsx b/src/components/primitives/InfiniteScroll.tsx
new file mode 100644
index 000000000..a26e7a4b1
--- /dev/null
+++ b/src/components/primitives/InfiniteScroll.tsx
@@ -0,0 +1,129 @@
+/**
+ * @Documentation
+ * This component is used to create an infinite scroll effect.
+ * 
+ * Usage:
+ * 
+ * No pagination Example
+    
+	const onSearch = useCallback((searchParam: string) => productService.search(searchParam).then((products) => setRows(buildRows(products))), []);
+ 
+    useEffect(() => {
+		productService.getLastProductSheets().then((products) => setRows(buildRows(products)));
+	}, []);
+ * 
+ *
+ * 
+ * With pagination Example
+ * 
+	const fetchClients = useCallback(
+		() =>
+			clientService.get(pagination.current, search.current).then((clients) => {
+				if (clients.length === 0) return [];
+				setRows((_rows) => [..._rows, ...buildRows(clients)]);
+				pagination.current.skip += pagination.current.take;
+				return clients;
+			}),
+		[],
+	);
+
+	const onNext = useCallback(
+		(release: () => void) => {
+			fetchClients().then((clients) => {
+				if (!clients.length) return console.warn("No more value to load");
+				release();
+			});
+		},
+		[fetchClients],
+	);
+
+	const onSearch = useCallback((searchParam: string) => {
+		pagination.current.skip = 0;
+		search.current = (searchParam && searchParam.trim()) || null;
+		setRows([]);
+	}, []);
+ * 
+ */
+import React from "react";
+
+export interface InfiniteScrollRef {
+  release: () => void;
+}
+
+export type IProps = {
+  offset?: number;
+  orientation?: "vertical" | "horizontal";
+  /**
+   * @description If `onNext` is set to `null`, it indicates that there is no pagination and the infinite scroll effect will not be triggered.
+   */
+  onNext?: ((release: () => void, reset?: () => void) => Promise<void> | void) | null;
+  children: React.ReactElement;
+};
+
+const InfiniteScroll = React.forwardRef<InfiniteScrollRef, IProps>(
+  ({ children, onNext, offset = 20, orientation = "vertical" }, ref) => {
+    const isWaiting = React.useRef<boolean>(false);
+    const elementRef = React.useRef<HTMLElement>();
+
+    // Expose a release method to the parent via the ref
+    React.useImperativeHandle(
+      ref,
+      () => ({
+        release: () => {
+          isWaiting.current = false;
+        },
+      }),
+      [],
+    );
+
+    const onChange = React.useCallback(() => {
+      if (!onNext) return;
+      const element = elementRef.current;
+      if (!element || isWaiting.current) return;
+      const { scrollTop, scrollLeft, clientHeight, clientWidth, scrollHeight, scrollWidth } = element;
+      let isChange = false;
+
+      if (orientation === "vertical") {
+        isChange = scrollTop + clientHeight >= scrollHeight - offset;
+      }
+      if (orientation === "horizontal") {
+        isChange = scrollLeft + clientWidth >= scrollWidth - offset;
+      }
+
+      if (isChange) {
+        isWaiting.current = true;
+        // We pass the release function to onNext. The parent can complete its async operation and then call release manually.
+        onNext(() => {
+          isWaiting.current = false;
+        });
+      }
+    }, [onNext, offset, orientation]);
+
+    React.useEffect(() => {
+      onChange();
+    }, [onChange]);
+
+    React.useEffect(() => {
+      const observer = new MutationObserver(onChange);
+      if (elementRef.current) {
+        observer.observe(elementRef.current, { childList: true, subtree: true });
+      }
+      window.addEventListener("resize", onChange);
+      return () => {
+        observer.disconnect();
+        window.removeEventListener("resize", onChange);
+      };
+    }, [onChange]);
+
+    if (!onNext) return children;
+
+    const clonedChild = React.cloneElement(children, {
+      onScroll: onChange,
+      ref: elementRef,
+    });
+
+    return clonedChild;
+  },
+);
+
+export default InfiniteScroll;
diff --git a/src/components/primitives/Input.tsx b/src/components/primitives/Input.tsx
index 83997d39e..0cedc93e2 100644
--- a/src/components/primitives/Input.tsx
+++ b/src/components/primitives/Input.tsx
@@ -64,10 +64,9 @@ export type InputProps<T = string> = Component<
 
 function Input({ look, size, state, inputClassName, className, ...props }: InputProps) {
   const { header, footer, prefix, suffix, label, hint, error, ...rest } = props;
-
   if (extensions.some(extension => !!props?.[extension]))
     return (
-      <>
+      <Group className={mergeClass("flex-col", className)} size={"xs"}>
         <label className={mergeClass(inputStyles({ look, size }), className, "flex-col flex")} htmlFor="input">
           {header && (
             <label htmlFor="input" className="w-full flex">
@@ -97,11 +96,11 @@ function Input({ look, size, state, inputClassName, className, ...props }: Input
             </label>
           )}
         </label>
-        {error}
-      </>
+        <Group>{error}</Group>
+      </Group>
     );
   return (
-    <>
+    <Group className={mergeClass("flex-col", className)} size={"xs"}>
       <input
         autoComplete="off"
         className={mergeClass(inputStyles({ look, size }), className)}
@@ -109,8 +108,8 @@ function Input({ look, size, state, inputClassName, className, ...props }: Input
         onChange={e => state?.[1]?.(e?.target?.value)}
         {...rest}
       />
-      {error}
-    </>
+      <Group className="flex-col">{error}</Group>{" "}
+    </Group>
   );
 }
 
@@ -185,16 +184,16 @@ Input.DateTime = function InputDateTime({
 
   const onHoursChange = useCallback(
     (e: string) => {
-      if (!date) return;
-      const newDate = new Date(date.getTime());
+      const currentDate = date ? new Date(date.getTime()) : new Date();
+
       let hours = Number.parseInt(e, 10);
       if (amPm === "pm" && hours < 12) {
         hours += 12;
       } else if (amPm === "am" && hours === 12) {
         hours = 0; // Midnight case
       }
-      newDate.setHours(hours, 0);
-      setDate(newDate);
+      currentDate.setHours(hours, 0);
+      setDate(currentDate);
     },
     [date, amPm, setDate],
   );
diff --git a/src/hooks/useDebounce.ts b/src/hooks/useDebounce.ts
new file mode 100644
index 000000000..42a98ea8a
--- /dev/null
+++ b/src/hooks/useDebounce.ts
@@ -0,0 +1,23 @@
+import { useEffect, useState } from "react";
+
+/**
+ * Hook to debounce a value
+ * @param value The value to debounce
+ * @param delay The delay in milliseconds
+ * @returns The debounced value
+ */
+export default function useDebounce(value: string | undefined, delay: number) {
+  const [debouncedValue, setDebouncedValue] = useState(value);
+
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [value, delay]);
+
+  return debouncedValue;
+}