Trying to make a reuseable DataGrid component with my own defaults from ReactDataGrid, but Typescript giving me errors

I'm trying to use ReactDataGrid library in TypeScript to create a base <BaseDataGrid /> component with my own defaults so I can stop repeating myself when using <ReactDataGrid /> in other pages and other components. Here's my base component:

import React from "react";
import ReactDataGrid from "@inovua/reactdatagrid-enterprise";
import { TypeDataGridProps } from "@inovua/reactdatagrid-community/types";

const BaseDataGrid = ({
    columns = [],
    dataSource = [],
    rtl = true,
    nativeScroll = true,
    showZebraRows = false,
    checkboxOnlyRowSelect = true,
    rowHeight = 60,
    showColumnMenuTool = false,
    sortable = false,
    ...otherProps
}: TypeDataGridProps) => (
    <ReactDataGrid
        columns={columns}
        dataSource={dataSource}
        className='h-full'
        rtl={rtl}
        nativeScroll={nativeScroll}
        showZebraRows={showZebraRows}
        checkboxOnlyRowSelect={checkboxOnlyRowSelect}
        showColumnMenuTool={showColumnMenuTool}
        sortable={sortable}
        rowHeight={rowHeight}
        {...otherProps}
    />
);

export default BaseDataGrid;

But when I'm trying to use it I get this error from TypeScript:

Type '{ columns: TypeColumns; dataSource: any[]; }' is missing the following properties from type 'TypeDataGridPropsNoI18n': isBinaryOperator, sortFunctions, editStartEvent, clearNodeCacheOnDataSourceChange, and 58 more

Here's an example of how I'm trying to use it:

import React  from "react";
import BaseDataGrid from "../../../../components/Common/BaseDataGrid";


const Test = () => {
    return (
        <div className='w-full h-96 lg:flex-grow'>
            <BaseDataGrid columns={[]} dataSource={[]} />
        </div>
    );
};

export default Test;

And here is also a codesandbox: https://codesandbox.io/s/adoring-faraday-mw1rp?file=/src/App.tsx

Why is it not working when I'm trying to make it as a separate component, but it does work when I import it from library? How can I make a reusable component with my own defaults so that I can pass my own props to it and also keep the component flexible?

I know that the error says I'm missing some default props, but is it logical to type out all of the default props from the library?

With this type signature

const BaseDataGrid = ({ .. }: TypeDataGridProps) => ( .. )

you're specifying that all the TypeDataGridProps props are required, even though you specify default values for all of them. You can use Partial to explicitly declare the props as optional:

const BaseDataGrid = ({ .. }: Partial<TypeDataGridProps>) => ( .. )