Как аннотировать React HO C, который передает дополнительные реквизиты, используя компонент класса в типе потока

Question

Следующий код работает для аннотирования HO C, который проходит в опоре

/* @flow */

import * as React from 'react';


/* withHoverState HOC */

type State = {
  hover: boolean,
};

export type InjectedProps = {|
  foo: string
|};

function withHoverState<T>(
  InnerComponent: React.ComponentType<{| ...T, ...InjectedProps |}>
): React.AbstractComponent<T> {
    return (props) => <InnerComponent {...props} foo="bar" />
  };


/* Button HOC */

type ButtonProps = {|
  text: string,
  ...InjectedProps
|}

const UnwrappedButton = ({ text, foo }: ButtonProps) => <button>${text} - ${foo}</button>

const Button = withHoverState(UnwrappedButton);


/* Test usage */

const Test1 = () => <Button text="test" />

https://flow.org/try/#0PQKgBAAgZgNg9gdzCYAoVBLAtgBzgJwBdkwBDAZzACUBTUgY2KnzizAHJ87H2BudVKDAIMhABYAJOADca + AMqFShGmAkB5AMLI0qQgE8cqxctUBeMAG9UYMGJlyAXGABGcODDoA7ADSoAvvyoNAAeeERgBkZgAJJeAFY0jDQAJgAKLDiUFpYAPjZgUO7O5IT4GF4A5qi5gehQAK5ejBhwXsKikg4KSioAPAAqAHwAFAVxXnKarHiTXoTOtAyEAHTTuG008wOGNH15YCtHAz6HR3GJyemZlLVDqACUi9yrAIIupfjL67NbhINDKwFACQXEIDXw7RGOBuDzAZkBfQmUxmm3mViOKxhcCy-kK7jMACIXKR8ISwMB7rY6ughAAhBqEQhtNRaHToKKqBlMtoZHHZKz5WwqEILMCfCqVPy2TEXJIqa78mr + dD0NqlMAAVS8CC + OCMKW5zPaFhGlkioUIpyKcDA-mcRt5sPhiJcjONQwAJJYRYQ8QBaMDem3 + PrAN08rz3VBqrwax0mjriKSyHqmEba3WkfWpBMPIKCcADGgahrkUiVVQoVXq4jF0oARnhYBGcIRYD6CYtoqJKlK5Mp6CAA

Однако мне нужно, чтобы внутренний компонент был классом, и когда я изменяю его, поток перестает быть счастливым

/* @flow */

import * as React from 'react';


/* withHoverState HOC */

type State = {
  hover: boolean,
};

export type InjectedProps = {|
  foo: string 
|};

function withHoverState<T>(
  InnerComponent: React.ComponentType<{| ...T, ...InjectedProps |}>
 ): React.AbstractComponent<T> {
  class Inner extends React.Component<T> {
    render() {
      return (
        <InnerComponent
          foo="bar"
          {...this.props}
        />
      );
    }
  };
  return Inner;
}

/* Button HOC */

type ButtonProps = {|
  text: string,
  ...InjectedProps
|}

const UnwrappedButton = ({ text, foo }: ButtonProps) => <button>${text} - ${foo}</button>

const Button = withHoverState(UnwrappedButton);


/* Test usage */

const Test1 = () => <Button text="test" />

Дает ошибку

29:   return Inner;
             ^ Cannot return `Inner` because inexact class `Inner` [1] is incompatible with exact `T` [2].

    References:

    19:   class Inner extends React.Component<T> {
                ^ [1]

    [LIB] ..//static/v0.122.0/flowlib/react.js:258:   > = React$AbstractComponent<Config, Instance>;

https://flow.org/try/#0PQKgBAAgZgNg9gdzCYAoVBLAtgBzgJwBdkwBDAZzACUBTUgY2KnzizAHJ87H2BudVKDAIMhABYAJOADca + AMqFShGmAkB5AMLI0qQgE8cqxctUBeMAG9UYMGJlyAXGABGcODDoA7ADSoAvvyoNAAeeERgBkZgAJJeAFY0jDQAJgAKLDiUFpYAPjZgUO7O5IT4GF4A5mCouYHoUACuXowYcF7CopIOCkoqADwAKgB8ABQFcV5ymqx4U16EzrQMhAB0M7jtNAuDh jT9eWCrx4M + R8dxicnpmZR1wzYAlEvcawCCLqX4Kxtz24RDYZWAr0GAUSiTORgUIqLwpSjLRjrWZbBaA4G2WxcOFyUaPDGYrE0QiNfAdcaEwn9SH4X6owgFSmYopwMwAIhcpHwbMZTKsx1W4gw5FWOFu-l5hOADyZj34hIltnqRJJZNiXim + H4EsE4AAQo1CIR2motDp0FFVAaje0MnAsmAcvlbCoQoswF8KpU-LYBZckiobvbyLUdfR2qUwABVLwIb44Iwpa3GjoWUaWSIws4ssD + ZzJ223fFmIH9FyGlPDAAklldhH8YAAtGAayz-P1gOWbV4Hqhw15IwXU51xFJZL1TKMY3HSAnUkO5QIhIMaJHGuRSJVVCh0P3IyvSgBGR1gPGO0tDzNu9kqUpssDS9BAA

1019 * Может кто-нибудь сказать мне, как я хотел бы сделать аннотации работать с компонентами класса?