js this expression is not callable problem

why I get this error ? My code working fine and my search functionality also works fine so why I get this error ? The error is on my Categorie.tsx file on ".filter" function

This expression is not callable.  Each member of the union type '{ <S extends IShopsCategoriesData>(predicate: (value: IShopsCategoriesData, index: number, array: IShopsCategoriesData[]) => value is S, thisArg?: any): S[]; (predicate: (value: IShopsCategoriesData, index: number, array: IShopsCategoriesData[]) => unknown, thisArg?: any): IShopsCategoriesData[]; } | ... 8 more ... ...' has signatures, but none of those signatures are compatible with each other.ts(2349)

Model.ts

export type ICategoriesListAll =   IShopsCategoriesData[] |   IShopsSubCategoriesClothingMenData[] |  IShopsSubCategoriesClothingWomenData[] |  IShopsSubCategoriesElectronicsData[] |  IShopsSubCategoriesArtData[] |  IShopsSubCategoriesBooksData[] |   IShopsSubCategoriesFurnitureData[] |  IShopsSubCategoriesGardenData[] |   IShopsSubCategoriesMusicData[] |  IShopsSubCategoriesToysData[];

Categorie.tsx

  const [categoryList, setCategoryList] = useState<ICategoriesListAll>(mockCategoryList);  const handleChangeSearchParam = (searchParam: string) => {    let current: ICategoriesListAll;    if(searchParam.length > 0) {      setSearchParam(searchParam);      current = copiedList.filter(el => el.name.toLowerCase().includes(searchParam.toLowerCase()));      setCategoryList(current);    } else {      setSearchParam('');      setCategoryList(copiedList);    }  };

The error is here

copiedList.filter(el => el.name.toLowerCase().includes(searchParam.toLowerCase()));

on .filter.

If I make only this IShopsSubCategoriesToysData[] at my categoryList at the useState then I get no error but with the Model above I get this error.

can anyone help me and let me know why I get this error and how can I solve it ?