"useclient"

const  parentCompnent=() => {
 const [searchTerm, setSearchTerm] = useState('');
const handleSearch = (event: React.ChangeEvent<HTMLInputElement>) => {
    setSearchTerm(event.target.value);
  };

 return (
    <>
          <Input type="text"
            placeholder="Search businesses..."
               value={searchTerm}
                onChange={handleSearch}
               />

           <ChildComponet searchTerm={searchTerm} catergory="generalstore" />
      </div>
    </>
  );
};


const ChildComponet: React.FC<ChildComponentProps> = async({ searchTerm, catergory }) => {

  const products: Products[] = await getproductsByCategory(catergory)  [];



  const filteredproduct = !searchTerm
    ? products
    : products.filter((product) =>
        products.productName.toLowerCase().includes(searchTerm.toLowerCase())
      );

  return (
    <>
    <Suspense fallback={<div>Loading...</div>}>
      {filteredProduct?.map((product, index) => (
        <Card key={index} product={product} />
      ))}
    </Suspense>
    </>
  );
}; 

export default function App() {
  const [query, setQuery] = useState('');
  const deferredQuery = useDeferredValue(query);
  return (
    <>
      <label>
        Search albums:
        <input value={query} onChange={e => setQuery(e.target.value)} />
      </label>
      <Suspense fallback={<h2>Loading...</h2>}>
        <SearchResults query={deferredQuery} />
      </Suspense>
    </>
  );
}

Does that mean this example wouldn't work if there was a fetch inside of SearchResults?

export default Page({ searchParams }){
  const search = searchParams.search
  const data = await getData(search)

  return (
    <>
      <SearchField />
      <Result data={data}/>
    </>
  )
}