Типизация компонентов высшего порядка React при помощи TypeScript

дорогие форумчане. Продолжаю изучать React + Redux + TypeScript и сегодня наткнулся на один непонятный мне аспект, даже не ошибку. Если получится, то помогите его решить.

У меня есть контекст данных для проброса по иерархии (FamilyLearningServiceContext):

import React from "react";
import UserService from "../../Services/UserService"

export interface IContext {
    UserService: UserService
}

const {
    Provider: FamilyLearningServiceProvider,
    Consumer: FamilyLearningServiceConsumer
} = React.createContext<IContext>({
    UserService: new UserService(),
});

export {
    FamilyLearningServiceProvider,
    FamilyLearningServiceConsumer
};

Затем создал компонент высшего порядка (HOC), основная его особенность, что он принимает данные из консьюмера контекста и пробрасывает в компонент:

import React from "react";
import {FamilyLearningServiceConsumer} from "../FamilyLearningServiceContext"

export const WithFamilyLearningService = () => <P extends object>(Component: React.ComponentType<P>): React.FC<P> => {

    return (props: any) => {
        return (
            <FamilyLearningServiceConsumer>
                {
                    (FamilyLearningService) => {
                        return <Component {...props as P} FamilyLearningService={FamilyLearningService}/>
                    }
                }
            </FamilyLearningServiceConsumer>
        )
    }
}

Дальше оборачиваю HOC'ом нужный мне компонент:

import React from "react";
import {WithFamilyLearningService} from "../HOC/WIthFamilyLearningService"
import {IContext} from "../FamilyLearningServiceContext/FamilyLearningServiceContext";

const App = (Context: IContext ) => {
    console.log("CheckContext", Context)
    return (
        <div>
          Text
        </div>
    );
};

export default WithFamilyLearningService()(App);

И в конце в провайдере контекста указываю, что нужно пробрасывать:

const userService = new UserService();

ReactDOM.render(
    <Provider store={Store}>
        <ErrorBoundary>
            <FamilyLearningServiceProvider value={{UserService:userService}}>
                <ConnectedRouter history={History}>
                    <App/> /* Вот тут ошибка */
                </ConnectedRouter>
            </FamilyLearningServiceProvider>
        </ErrorBoundary>
    </Provider>,
    document.getElementById("root"));

Компонент App подсвечивается красным с текстом ошибки (TS2741: Property 'UserService' is missing in type '{}' but required in type 'IContext'). Он просит явно указать принимаемый сервис, который фактически пробрасывается двумя строчками выше. Ошибки при выполнении нету, все успешно пробрасывается, но редактор постоянно о ней напоминает.

И вот вопрос:

Можно ли её как-то решить или только игнорировать?

Спасибо