process the pre-selected FP inside the child component

src/app/components/Staking/FinalityProviders/FinalityProviderSearch.tsx

@@ -1,29 +1,27 @@
 import { useDebounce } from "@uidotdev/usehooks";
+import { useSearchParams } from "next/navigation";
 import React, { useEffect, useState } from "react";
 import { FiSearch } from "react-icons/fi";
 
 interface FinalityProviderSearchProps {
-  initialSearchValue: string | null;
   onSearch: (searchTerm: string) => void;
 }
 
 export const FinalityProviderSearch: React.FC<FinalityProviderSearchProps> = ({
-  initialSearchValue,
   onSearch,
 }) => {
-  const [searchTerm, setSearchTerm] = useState("");
-  const debouncedSearchTerm = useDebounce(searchTerm, 300);
+  // Get the finality provider from the search params
+  const searchParams = useSearchParams();
+  const initialSearchFp = searchParams.get("fp");
 
-  useEffect(() => {
-    onSearch(debouncedSearchTerm);
-  }, [debouncedSearchTerm, onSearch]);
+  const [searchTerm, setSearchTerm] = useState(initialSearchFp);
+  const debouncedSearchTerm = useDebounce(searchTerm, 300);
 
   useEffect(() => {
-    if (initialSearchValue) {
-      setSearchTerm(initialSearchValue);
-      onSearch(initialSearchValue);
+    if (debouncedSearchTerm) {
+      onSearch(debouncedSearchTerm);
     }
-  }, [initialSearchValue, onSearch]);
+  }, [debouncedSearchTerm, onSearch]);
 
   const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
     setSearchTerm(e.target.value);
@@ -38,7 +36,7 @@ export const FinalityProviderSearch: React.FC<FinalityProviderSearchProps> = ({
         <input
           type="text"
           placeholder="Search by Name or Public Key"
-          value={searchTerm}
+          value={searchTerm ?? ""}
           onChange={handleSearch}
           className="w-full pl-10 pr-4 py-2 text-sm bg-transparent border-b border-gray-300 focus:outline-none focus:border-primary"
         />

src/app/components/Staking/FinalityProviders/FinalityProviders.tsx

@@ -19,7 +19,6 @@ import { FinalityProvider } from "./FinalityProvider";
 import { FinalityProviderSearch } from "./FinalityProviderSearch";
 
 export const FinalityProviders: React.FC<FinalityProvidersProps> = ({
-  initialSearchValue,
   selectedFinalityProvider,
   onFinalityProviderChange,
   onFinalityProvidersLoad,
@@ -107,10 +106,7 @@ export const FinalityProviders: React.FC<FinalityProvidersProps> = ({
         <strong>Step-1:</strong> Select a finality provider
       </p>
       <div className="flex gap-3">
-        <FinalityProviderSearch
-          initialSearchValue={initialSearchValue}
-          onSearch={handleSearch}
-        />
+        <FinalityProviderSearch onSearch={handleSearch} />
       </div>
       <div className="hidden gap-2 px-4 lg:grid lg:grid-cols-stakingFinalityProvidersDesktop">
         <p>Finality Provider</p>

src/app/components/Staking/Staking.tsx

@@ -1,8 +1,5 @@
-"use client";
-
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { networks, Transaction } from "bitcoinjs-lib";
-import { useSearchParams } from "next/navigation";
 import { Dispatch, SetStateAction, useEffect, useMemo, useState } from "react";
 import { Tooltip } from "react-tooltip";
 import { useLocalStorage } from "usehooks-ts";
@@ -85,10 +82,6 @@ export const Staking: React.FC<StakingProps> = ({
   btcWalletBalanceSat,
   availableUTXOs,
 }) => {
-  // Get the finality provider from the search params
-  const searchParams = useSearchParams();
-  const initialSearchFp = searchParams.get("fp");
-
   // Staking form state
   const [stakingAmountSat, setStakingAmountSat] = useState(0);
   const [stakingTimeBlocks, setStakingTimeBlocks] = useState(0);
@@ -688,7 +681,6 @@ export const Staking: React.FC<StakingProps> = ({
             onFinalityProvidersLoad={setFinalityProviders}
             selectedFinalityProvider={finalityProvider}
             onFinalityProviderChange={handleChooseFinalityProvider}
-            initialSearchValue={initialSearchFp}
           />
         </div>
         <div className="divider m-0 lg:divider-horizontal lg:m-0" />

src/app/types/finalityProviders.ts

@@ -19,7 +19,6 @@ export interface Description {
 }
 
 export interface FinalityProvidersProps {
-  initialSearchValue: string | null;
   onFinalityProvidersLoad: Dispatch<
     SetStateAction<FinalityProvider[] | undefined>
   >;