Passing style from HTMLElement to JSX.Element

Question

I have the following function which does some styling for ReactMarkdown.

  td: (td: HTMLTableCellElement) => {
    const { children, style } = td;
    return (
      <td style={style} className="border px-8 py-4">
        {children}
      </td>
    );
  },

While this works, tsc is complaining style is not compatible

Type 'CSSStyleDeclaration' is not assignable to type 'Properties<string | number, string & {}>'.
  Types of property 'appearance' are incompatible.
    Type 'string' is not assignable to type 'Appearance | undefined'.

td.style : CSSStyleDeclaration
The JSX style attribute: CSSProperties | undefined

Could you enlighten me, on what are the differences between these 2 types and why they are not totally compatible.