Type 'x' is not assignable to type 'x'. ts(2322)

I have this in @/components/ui/billboard.tsx file

import { Billboard } from "@/types"

interface BillboardProps {
    data: Billboard;
};

const Billboard: React.FC<BillboardProps> = ({
    data
    }) => { 
        console
    return (
        <div>{data.label}</div>
    )
}

export default Billboard;

and this it he type definition of a Billboard and Category in @/typesfile

export interface Billboard {
    id: string;
    label: string;
    imageUrl: string
}
export interface Category {
    id: string;
    name: string;
    billboard: string;
}

and this in @/app/routes/category/[categoryId]/page.tsx file

import Billboard from "@/components/ui/billboard";
import getCategory from "@/actions/get-category";

interface CategoryPageProps {
      // values
}

const CategoryPage: React.FC<CategoryPageProps> = async ({
params,
    searchParams
}) => {
const category = await getCategory(params.categoryId)
return (
        <Billboard data={category.billboard} /> // ⚠️ <-- error pops up here in the word data
      )
}
export default CategoryPage;

this is the getCategory component in @/actions/get-category

import { Category } from "@/types";

const URL = `${process.env.NEXT_PUBLIC_API_URL}/categories`;

const getCategory = async (id: string): Promise<Category> => {
    const res = await fetch (`${URL}/${id}`);

    return res.json();
};

export default getCategory;

this is the error highlights on the data prop in @/app/routes/category/[categoryId]/page.tsx file. the code works properly and components are rendering but i have the error only highglighted on the vscode

Type 'string' is not assignable to type 'Billboard'.ts(2322)
billboard.tsx(4, 5): The expected type comes from property 'data' which is declared here on type 'IntrinsicAttributes & BillboardProps'
(property) BillboardProps.data: Billboard

>Solution :

Your Category interface declaration is wrong. Category["billboard"] is of type string but should be of type Billboard instead.

export interface Category {
    id: string;
    name: string;
    billboard: string; // <- change this to 'Billboard'
}