Got weird error in react-data-table-component

Question

i have this code in react typescript

interface Cart {
    ID: number;
    ...
    user: User;
    trucking: Trucking | null;
    ShippingLine: ShippingLine;
    OurServices: OurService[];
    company: Company | null;
}
const [cart, setCart] = useState<CartProps[]>([]);
const columns: TableColumn<CartProps>[] = [
        {
            name: "Price",
            selector: (row) => row.price,
            sortable: true,
        },
        {
            name: "Email",
            selector: (row) => row.consignee_company_email
        },
        {
            name: "Action",
            cell: (row) => <button onClick={() => navigate(`/admin/cart/edit/${row.ID}`)} className="text-green-500 underline font-bold">Edit</button>,
        }
    ];
return (
        <>
            <TableTemplate
                pageName="Cart"
                columns={columns}
                data={cart}
                addDataButton
                addDataButtonAction={handleAddCart}
                enableSearch />
        </>
    )

it returns error in this line

columns={columns}

with this error

Type 'TableColumn<Cart>[]' is not assignable to type 'TableColumn<TableColumnBase>[]'.
  Type 'TableColumn<Cart>' is not assignable to type 'TableColumn<TableColumnBase>'.
    Types of property 'cell' are incompatible.
      Type '((row: Cart, rowIndex: number, column: TableColumn<Cart>, id: string | number) => ReactNode) | undefined' is not assignable to type '((row: TableColumnBase, rowIndex: number, column: TableColumn<TableColumnBase>, id: string | number) => ReactNode) | undefined'.
        Type '(row: Cart, rowIndex: number, column: TableColumn<Cart>, id: string | number) => ReactNode' is not assignable to type '(row: TableColumnBase, rowIndex: number, column: TableColumn<TableColumnBase>, id: string | number) => ReactNode'.
          Types of parameters 'row' and 'row' are incompatible.
            Type 'TableColumnBase' is missing the following properties from type 'Cart': ID, user_id, shipping_line_id, trucking_id, and 27 more.ts(2322)
TableTemplate.tsx(8, 5): The expected type comes from property 'columns' which is declared here on type 'IntrinsicAttributes & TableTemplateProps<TableColumnBase>'

and this line

data={cart}

with this error

Type 'Cart[]' is not assignable to type 'TableColumnBase[]'.
  Type 'Cart' has no properties in common with type 'TableColumnBase'.ts(2322)
TableTemplate.tsx(9, 5): The expected type comes from property 'data' which is declared here on type 'IntrinsicAttributes & TableTemplateProps<TableColumnBase>'

but i have another page with this interface and same implementation working

interface Trucking {
    id: number;
    from_port_id: number;
    from_province_id: number;
    from_regency_id: number;
    from_sub_district_id: number;
    to_port_id: number;
    to_province_id: number;
    to_regency_id: number;
    to_sub_district_id: number;
    type: string;
    truck_type: string;
    price: number;
    from_port: Port;
    from_province: Province;
    from_regency: Regency;
    from_sub_district: SubDistrict;
    to_port: Port;
    to_province: Province;
    to_regency: Regency;
    to_sub_district: SubDistrict;
}

this is my code for the table template

import DataTable, { TableColumn } from "react-data-table-component"
import Button from "./Button"
import { TableColumnBase } from "react-data-table-component/dist/src/DataTable/types"
import { ChangeEvent, useEffect, useState } from "react"

interface TableTemplateProps<T> {
    pageName: string,
    columns: TableColumn<T>[],
    data: T[],
    addDataButton?: boolean,
    addDataButtonAction?: () => void,
    enableSearch?: boolean,
    progressPending?: boolean
}

export const TableTemplate = <T extends TableColumnBase>(props: TableTemplateProps<T>) => {
    const [records, setRecords] = useState<T[]>(props.data)

    useEffect(() => {
        setRecords(props.data);
    }, [props.data]);
    const handleFilter = (e: ChangeEvent<HTMLInputElement>) => {
...
    }

 return (
        <div className="w-full max-h-screen overflow-y-scroll">
            <div className="grid grid-cols-2 mb-3">
                {props.enableSearch && (
                    <div className="flex gap-x-4">
                        <h1 className="font-bold text-lg">{props.pageName}</h1>
                        <input type="text" onChange={handleFilter} />
                    </div>
                )}
                {props.addDataButton && (
                    <div className="text-end">
                        <Button text={`Add ${props.pageName}`} action={() => { props.addDataButtonAction }} />
                    </div>
                )}
            </div>
            <DataTable
                columns={props.columns}
                data={records}
                className="rounded-xl bg-transparent text-secondary"
                customStyles={{
                    table: {
                        style: {
                            backgroundColor: "#000000",
                        }
                    },
                }}
                highlightOnHover
                pagination
                pointerOnHover
                selectableRows
                fixedHeader
                progressPending={props.progressPending}
            />
        </div>
    )
}

does anyone know what's the problem? i cant find it cause i've implemented the cart part the same as the trucking part