reactjs - React HOC-fel vid användning av TypeScript

Jag försöker skapa en wrapper-funktion för att göra React context consumers till en HOC, skriven i TypeScript. Detta är vad jag har hittills:

import { ComponentType, ConsumerProps, createElement } from 'react';

type Omit<T, K> = Pick<T, Exclude<keyof T, K>>;

export const createConsumer = <S>(
  consumer: ComponentType<ConsumerProps<S>>
) => <P>(
  component: ComponentType<P & S>
) => (
  props: Omit<P, keyof S>
) => createElement(consumer, {
  children: (state: S) => createElement(component, {
    ...props as any,
    ...state as any
  })
});

Allt fungerar bra, förutom när man nestar HOCs. När jag gör det tar den bara upp props från den sista HOC och ignorerar alla andra.

import * as React from 'react';
import { createContext } from 'react';

import { createConsumer } from './createConsumer';

const firstContext = createContext({ first: 'value' });
const withFirst = createConsumer(firstContext.Consumer);

const secondContext = createContext({ second: 'value' });
const withSecond = createConsumer(secondContext.Consumer);

const Component = withFirst(withSecond(({ first, second }) => (
//                                        ^^^^^
// TS2459: Type '{ second: string; } & { children?: ReactNode; }' has no property 'first' and no string index signature.
  <div/>
)));

Vet någon vad problemet är?