No overload match when wrapping Table with styled-components

[JeromeDeLeon]

Hi,

I would like to know how to wrap a Table with styled-components because currently, it feels like I'm doing it wrong.

import { Table, TableProps } from 'antd';
import styled from 'styled-components';

const StyledTable = styled(Table)`
  .ant-table-thead > tr > th {
    font-weight: 600;
  }
`;

const Table = <RecordType extends object = any>(
  tableProps: TableProps<RecordType>
) => {
  return <StyledTable {...tableProps} />;
};

export default Table;

But I got TS error when using StyledTable:

No overload matches this call.
  Overload 1 of 2, '(props: Omit<Omit<Pick<TableProps<object>, "footer" | "style" | "summary" | "title" | "columns" | "scroll" | "prefixCls" | "className" | "children" | "tableLayout" | "expandable" | ... 31 more ... | "getPopupContainer"> & Partial<...> & Partial<...>, never> & Partial<...>, "theme"> & { ...; } & { ...; }): ReactElement<...>', gave the following error.
    Type '{ dropdownPrefixCls?: string | undefined; dataSource?: readonly RecordType[] | undefined; columns?: ColumnsType<RecordType> | undefined; pagination?: false | ... 1 more ... | undefined; ... 39 more ...; childrenColumnName?: string | undefined; }' is not assignable to type 'Omit<Omit<Pick<TableProps<object>, "footer" | "style" | "summary" | "title" | "columns" | "scroll" | "prefixCls" | "className" | "children" | "tableLayout" | "expandable" | ... 31 more ... | "getPopupContainer"> & Partial<...> & Partial<...>, never> & Partial<...>, "theme">'.
      Types of property 'footer' are incompatible.
        Type 'PanelRender<RecordType> | undefined' is not assignable to type 'PanelRender<object> | undefined'.
          Type 'PanelRender<RecordType>' is not assignable to type 'PanelRender<object>'.
            Type 'object' is not assignable to type 'RecordType'.
              'object' is assignable to the constraint of type 'RecordType', but 'RecordType' could be instantiated with a different subtype of constraint 'object'.
  Overload 2 of 2, '(props: StyledComponentPropsWithAs<typeof Table, DefaultTheme, {}, never, typeof Table>): ReactElement<StyledComponentPropsWithAs<typeof Table, DefaultTheme, {}, never, typeof Table>, string | JSXElementConstructor<...>>', gave the following error.
    Type '{ dropdownPrefixCls?: string | undefined; dataSource?: readonly RecordType[] | undefined; columns?: ColumnsType<RecordType> | undefined; pagination?: false | ... 1 more ... | undefined; ... 39 more ...; childrenColumnName?: string | undefined; }' is not assignable to type 'Omit<Omit<Pick<TableProps<object>, "footer" | "style" | "summary" | "title" | "columns" | "scroll" | "prefixCls" | "className" | "children" | "tableLayout" | "expandable" | ... 31 more ... | "getPopupContainer"> & Partial<...> & Partial<...>, never> & Partial<...>, "theme">'.
      Types of property 'footer' are incompatible.
        Type 'PanelRender<RecordType> | undefined' is not assignable to type 'PanelRender<object> | undefined'.ts(2769)