Add Icons to project Material Table error

Question

I`m try to do this https://github.com/mbrn/material-table but I get error. I think there is a problem because I use TSX not JSX? do you know how to fix?

No overload matches this call.
  Overload 1 of 2, '(props: { component: ElementType<any>; } & { children?: ReactNode; color?: "primary" | "secondary" | "disabled" | "error" | "inherit" | "action" | undefined; fontSize?: "inherit" | ... 3 more ... | undefined; htmlColor?: string | undefined; shapeRendering?: string | undefined; titleAccess?: string | undefined; viewBox?: string | undefined; } & CommonProps<...> & Pick<...>): Element', gave the following error.
    Property 'component' is missing in type '{ ref: ((instance: unknown) => void) | MutableRefObject<unknown> | null; children?: ReactNode; }' but required in type '{ component: ElementType<any>; }'.
  Overload 2 of 2, '(props: DefaultComponentProps<SvgIconTypeMap<{}, "svg">>): Element', gave the following error.
    Type '((instance: unknown) => void) | MutableRefObject<unknown> | null' is not assignable to type '((instance: SVGSVGElement | null) => void) | RefObject<SVGSVGElement> | null | undefined'.
      Type 'MutableRefObject<unknown>' is not assignable to type '((instance: SVGSVGElement | null) => void) | RefObject<SVGSVGElement> | null | undefined'.
        Type 'MutableRefObject<unknown>' is not assignable to type 'RefObject<SVGSVGElement>'.ts(2769)
OverridableComponent.d.ts(17, 7): 'component' is declared here.

and here

No overload matches this call.
  Overload 1 of 2, '(props: Readonly<MaterialTableProps<{ name: string; surname: string; birthYear: number; birthCity: number; }>>): MaterialTable<{ name: string; surname: string; birthYear: number; birthCity: number; }>', gave the following error.
    Type '{ Add: React.ForwardRefExoticComponent<React.RefAttributes<unknown>>; Check: React.ForwardRefExoticComponent<React.RefAttributes<unknown>>; Clear: React.ForwardRefExoticComponent<React.RefAttributes<unknown>>; ... 13 more ...; ViewColumn: React.ForwardRefExoticComponent<...>; }' is not assignable to type 'Icons'.
      The types of 'Add.defaultProps' are incompatible between these types.
        Type 'Partial<RefAttributes<unknown>> | undefined' is not assignable to type 'Partial<RefAttributes<SVGSVGElement>> | undefined'.
          Type 'Partial<RefAttributes<unknown>>' is not assignable to type 'Partial<RefAttributes<SVGSVGElement>>'.
            Types of property 'ref' are incompatible.
              Type '((instance: unknown) => void) | RefObject<unknown> | null | undefined' is not assignable to type '((instance: SVGSVGElement | null) => void) | RefObject<SVGSVGElement> | null | undefined'.

Answer 1

try this

forwardRef<SVGSVGElement>

in the icons or

import Icons like this:

import MaterialTable, { Icons } from 'material-table'
const tableIcons: Icons = {...}