Typescript: Typing any key in an object plus reserved keys

Question

I want to implement structure like this:

interface IDataProps {
  [key: string]: ReactNode | ((props: IRenderDataProps) => JSX.Element) // any key except those below
  key: string | number; // reserved key
  children?: IDataProps[] // reserved key
}

But i have an error:

TS2411: Property 'children' of type 'IDataProps[]' is not assignable to 'string' index type 'ReactNode | ((props: IRenderDataProps) => JSX.Element)'

What I'm trying to do:

type TDataSource = {
  [key: string]: ReactNode | ((props: IRenderDataProps) => JSX.Element); // any key except those below
} & {
  key: string | number; // reserved key
  children?: TDataSource[]; // reserved key
};

This option is good, but in deep nesting (level 2 of nesting or more) I get an error:

TS2322: Type '{ key: number; name: () => JSX.Element; children: { key: number; name: () => JSX.Element; }[]; }' is not assignable to type 'TDataSource'.

Type '{ key: number; name: () => JSX.Element; children: { key: number; name: () => JSX.Element; }[]; }' is not assignable to type '{ [key: string]: ReactNode | ((props: IRenderDataProps) => Element); }'.

Property 'children' is incompatible with index signature.

Additional clarification: for example, I have 2 reserved properties: key, children (optional recursive), and I want to have ANY other property that should be ReactNode | ((props: IRenderDataProps) => JSX.Element) if it is neither key nor children

const nestingExample: TDataSource[] = [
  {
    key: 5, // I'm required and reserved key
    [`problemIsThatImCustomKeyThatShouldBe-ReactNode | ((props: IRenderDataProps)`]:
      () => <>SomeJSX</>,
    children: [
      {
        key: 6,
        iAmAnotherKey: 'key'
      }
    ],
  },
];