Showing this error in next build: useSearchParams() should be wrapped in a suspense boundary at page,
I tried to wrap with <Suspense> tag too, but not working. I am using Next.js 15

Here's my /app/(root)/products/page.tsx code:

import { fetchAllProducts } from "@/api/products";
import { ProductProvider } from "@/contexts/products";
import ProductsPageView from "@/page-sections/products/page-view";
import { cookies } from "next/headers";
import React from "react";

type searchParamsProps = Promise<{
  q: string;
  brand: string;
  category: string;
}>;

const Products = async (props: { searchParams: searchParamsProps }) => {
  const cookieStore = await cookies();
  const token = cookieStore.get("token")?.value;

  const { q, brand, category } = await props.searchParams;

  const products = await fetchAllProducts(token as string, {
    search: q,
    brand: brand,
    category: category,
  });

  return (
    <ProductProvider value={{ products }}>
      <ProductsPageView />
    </ProductProvider>
  );
};

export default Products;