.next/types/app/(root)/products/[category]/page.ts:34:29 Type error: Type 'PageProps' does not satisfy the constraint 'import("C:/Users/Next Template/.next/types/app/(root)/products/[category]/page").PageProps'. Types of property 'params' are incompatible. Type '{ category: string; }' is missing the following properties from type 'Promise': then, catch, finally, [Symbol.toStringTag]

32 | 33 | // Check the prop type of the entry function

34 | checkFields<Diff<PageProps, FirstArg<TEntry['default']>, 'default'>>() | ^ 35 | 36 | // Check the arguments and return type of the generateMetadata function 37 | if ('generateMetadata' in entry) { Next.js build worker exited with code: 1 and signal: null

  import React from "react";
import { BigHeading } from "@/components/BigHeading";
import Breadcrumb from "@/components/Breadcrumb";
import CategoryProductsList from "@/components/CategoryProductsList";
import { products, Product } from "@/data/products";

type PageProps = {
    params: {
        category: string;
    };
    searchParams: object; // required by Next.js
};

// Map URL category slug to a friendly name (optional)
const categoryMap: { [key: string]: string } = {
    tablets: "Tablets",
    capsules: "Capsules",
    syrups: "Syrups",
    ointments: "Ointments",
    injectables: "Injectables",
    others: "Others",
};

// Export generateStaticParams to pre-render these pages (required when using export mode)
export async function generateStaticParams() {
    return [
        { category: "tablets" },
        { category: "capsules" },
        { category: "syrups" },
        { category: "ointments" },
        { category: "injectables" },
        { category: "others" },
    ];
}

export default async function CategoryPage(props: PageProps) {
    const { params } = props;
    const currentCategory = params.category.toLowerCase();
    const friendlyCategory = categoryMap[currentCategory] || currentCategory;

    // Filter products based on category
    const filteredProducts: Product[] = products.filter(
        (p) => p.category.toLowerCase() === currentCategory
    );

    return (
        <>
            <Breadcrumb
                title={friendlyCategory}
                items={[
                    { label: "Home", href: "/" },
                    { label: "Our Products", href: "/products" },
                    { label: friendlyCategory },
                ]}
                backgroundImage="/price-2.jpg"
            />

            {/* Page Header */}
            <section className="container mx-auto px-4 py-12 md:py-16 text-left">
                <BigHeading line1={friendlyCategory} line2="Products" />
                <p className="text-gray-600 mb-4">
                    Explore our exclusive range of {friendlyCategory}. Our products are
                    crafted to meet the highest standards in quality and efficacy.
                </p>
            </section>

            {/* Render the category-specific products list */}
            <CategoryProductsList products={filteredProducts} />
        </>
    );
}

how can i resolve this issue