1 files changed, 5 insertions, 5 deletions
diff --git a/src/pages/shop/brands/index.js b/src/pages/shop/brands/index.js
index fec2405a..bfdcd403 100644
--- a/src/pages/shop/brands/index.js
+++ b/src/pages/shop/brands/index.js
@@ -1,7 +1,7 @@
 import Header from "@/components/layouts/Header";
 import apiOdoo from "@/core/utils/apiOdoo";
 import InfiniteScroll from "react-infinite-scroll-component";
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import Spinner from "@/components/elements/Spinner";
 import Layout from "@/components/layouts/Layout";
 import ManufactureCard from "@/components/manufactures/ManufactureCard";
@@ -20,12 +20,12 @@ export default function Brands({ initialManufactures }) {
   const alpha = Array.from(Array(26)).map((e, i) => i + 65);
   const alphabets = alpha.map((x) => String.fromCharCode(x));
 
-  const getMoreManufactures = async () => {
+  const getMoreManufactures = useCallback(async () => {
     const name = manufactureStartwith != '' ? `${manufactureStartwith}%` : '';
     const result = await apiOdoo('GET', `/api/v1/manufacture?limit=30&offset=${manufactures.length}&name=${name}`);
     setHasMoreManufacture(manufactures.length + 30 < result.manufacture_total)
     setManufactures((manufactures) => [...manufactures, ...result.manufactures]);
-  };
+  }, [ manufactureStartwith ]);
 
   const filterManufactureStartWith = (character) => {
     setManufactures([]);
@@ -38,7 +38,7 @@ export default function Brands({ initialManufactures }) {
 
   useEffect(() => {
     getMoreManufactures();
-  }, [manufactureStartwith]);
+  }, [ getMoreManufactures ]);
 
   return (
     <>
@@ -48,7 +48,7 @@ export default function Brands({ initialManufactures }) {
           <h1>Semua Brand di Indoteknik</h1>
           <div className="flex overflow-x-auto gap-x-2 py-2">
             {alphabets.map((alphabet, index) => (
-              <button key={index} className={"p-2 py-1 border bg-white border-gray_r-6 rounded w-10 flex-shrink-0" + (manufactureStartwith == alphabet ? ' bg-yellow_r-9 border-yellow_r-9 ' : '')} onClick={() => filterManufactureStartWith(alphabet)}>
+              <button key={index} className={"p-2 py-1 border bg-white border-gray_r-6 rounded w-10 flex-shrink-0" + (manufactureStartwith == alphabet ? ' !bg-yellow_r-9 border-yellow_r-9 ' : '')} onClick={() => filterManufactureStartWith(alphabet)}>
                 {alphabet}
               </button>
             ))}