Как я могу вернуть строковое значение из компонента, который является потребителем React Context

Question

У меня есть компонент React, который является потребителем поставщика контекста.Я использую это для перевода компонента для интернационализации.Мой потребитель по сути является оберткой вокруг элемента React Context Consumer и вызывает базовую функцию translate.Моя проблема в том, что я хочу просто вернуть значение STRING из этого компонента, но на самом деле он возвращает элемент React, который нарушает мои интерфейсы.Можно ли «развернуть» это и просто дать мне строку?

import * as React from 'react';
import {IIntlContext, IntlContext} from 'Common/Intl/IntlProvider';

export default (key: string) => {

    // I JUST WANT THE STRING!

    return (
        <IntlContext.Consumer>
            {
                (context: IIntlContext) => {
                    return context.translate(key);
                }
            }
        </IntlContext.Consumer>
    );
};

Провайдер оборачивает все мое приложение React и выглядит так:

import * as React from 'react';

interface IIntlProviderProps {
    locale: string;
    i18n: any;
    children: React.ReactNode;
}

interface IIntlProviderState {
     locale: string;
     i18n: any;
}

export interface IIntlContext extends IIntlProviderState {
    translate: (key: string) => any;
}

export const IntlContext = React.createContext<IIntlContext | undefined>(
    undefined
);

export class IntlProvider extends React.Component<IIntlProviderProps, IIntlProviderState> {
    constructor(props: IIntlProviderProps) {
        super(props);

        this.state = {
            locale: props.locale,
            i18n: props.i18n
        };
    }

    public translate = (key: string) => {
        return this.state.i18n.t(key);
    };

    public render() {
        const context: IIntlContext = {
            ...this.state,
            translate: this.translate
        };

        return (
            <IntlContext.Provider value={context}>
                {this.props.children}
            </IntlContext.Provider>
        );
    }
}


export default IntlProvider;

Моя цель состоит в том, чтобы простобыть в состоянии импортировать потребителя и передать ему строку для перевода следующим образом:

import translate from 'Common/Intl/Translator';

translate('some text');