Uncaught TypeError: Cannot read property in react context api for multilanguage

I am new to reactjs and facing difficulty using context api.

I was trying to make multilanguage web app on react with the approach describe in React / Redux and Multilingual (Internationalization) Apps - Architecture

But having error in passing and accessing context value

Here is my code Login.jsx

import React,{Component} from 'react';
import ReactDom from 'react-dom';
import translate from './translate';
import PropTypes from 'prop-types';
// import {langProvider} from './langContext';

const langContext = React.createContext();
class Login extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
                    message:'',
                    class:'alert',
                    lang:{
                        currentLanguage:"fr"
                    }
        };
    }
    render(){
        return(
            <langContext.Provider value={this.state.lang}>
             {({currentLanguage}) => (
            <div className="login-box">
            <div className="login-box-body">
                <div className="login-logo">
                    <a href="/"><img src="img/new-header-logo.png" className="logo" /></a>
                </div>
                <h4 className="login-title">{ this.props.strings.someTranslatedText }</h4>
                <h4 className="login-title">Hello! Let's Get Started</h4>
                <p className="login-box-msg">Sign in to continue.</p>
                 <br />
            </div>
        </div>
        )}
        </langContext.Provider>
        );
    }
}
Login.propTypes = {
    strings: PropTypes.object
};

Login.defaultProps = {
     strings: {
         someTranslatedText: 'Hello World'
    }
};
export default translate('Login')(Login);

And the translate.jsx

import { default as React } from 'react';
import en from './i18n/en';
import fr from './i18n/fr';
import PropTypes from 'prop-types';

const languages = {
    en,
    fr
};
export default function translate(key) {
    return Component => {
        class TranslationComponent extends React.Component {
            render() {
                console.log('Key: ', key);
                console.log('current--: ', this.context);
                var strings = languages[this.context.currentLanguage][key];
                // this.context = {currentLanguage:"TESt"}
                console.log('current language: ', this.context.currentLanguage);
                // var strings = languages.fr[key]
                return <Component {...this.props} {...this.state} strings={strings} />;
            }
        }
        TranslationComponent.contextTypes = {
            currentLanguage: PropTypes.string
        };
        return TranslationComponent;
    };
}

Here is the error

Also the when click on error it leads to code