diff --git a/components/filters/custom-select-provider.tsx b/components/filters/custom-select-provider.tsx index e5b810e1e8..876f42d030 100644 --- a/components/filters/custom-select-provider.tsx +++ b/components/filters/custom-select-provider.tsx @@ -2,7 +2,7 @@ import { Select, SelectItem } from "@nextui-org/react"; import { useRouter, useSearchParams } from "next/navigation"; -import { useCallback, useEffect, useState } from "react"; +import React, { useCallback, useMemo } from "react"; import { CustomProviderInputAWS, @@ -34,10 +34,9 @@ const dataInputsProvider = [ }, ]; -export const CustomSelectProvider = () => { +export const CustomSelectProvider: React.FC = () => { const router = useRouter(); const searchParams = useSearchParams(); - const [selectedProvider, setSelectedProvider] = useState(""); const applyProviderFilter = useCallback( (value: string) => { @@ -52,34 +51,34 @@ export const CustomSelectProvider = () => { [router, searchParams], ); - useEffect(() => { - const providerFromUrl = searchParams.get("filter[provider__in]") || ""; - setSelectedProvider(providerFromUrl); - }, [searchParams]); + const currentProvider = searchParams.get("filter[provider__in]") || ""; + + const selectedKeys = useMemo(() => { + return dataInputsProvider.some( + (provider) => provider.key === currentProvider, + ) + ? [currentProvider] + : []; + }, [currentProvider]); return (