Multilingual React Application using typescript

Question

I'm learning react-typescript programming.
Developed a sample application, which supports in multi language.

github Souce: https://github.com/phanivaranasi/sownikbackend.git
Review the code and share suggestions, best approaches. I have gone through various blogs, tried my best for developing language context. Below is my work

• Created react application by typescript template
  npx create-react-app --template typescript
• Implemented react-redux store for login & change language
  react-redux redux
• Login & change store are working properly
  login component
• Implemented language context
  (I'm looking for efficient code by leveraging Typescript - as context is getting called multiple times console logs are available)

--English

--Hindi

Working Model

import React, { useReducer } from "react";
import { ILanguageModel, ILanguageProps } from "../model";
import { LangActionType, LangEnumShortName, } from "../state/action-types";
import reducer, { initialState } from '../state/reducer/lang.reducer';
import en from '../locales/en.json';
import hi from '../locales/hi.json';


interface ContextProps {
    state: ILanguageModel,
    dispatch: {
        setLanguage: (lang: ILanguageModel) => void;
        translate: (key: string) => string;
    }
}

export const LanguageContext = React.createContext({} as ContextProps);

const LanguageProvider: React.FC<ILanguageProps> = ({ children }) => {

    const [state, dispatch] = useReducer(reducer, initialState);


    const setLanguage = (lang: ILanguageModel) => {
        console.log('set lanauge', lang);
        dispatch({
            type: LangActionType.CHANGELANG,
            payload: lang
        });
    }
    const translate = (key: string): string => {
        console.log('translate key', key, ">", state);
        let _langData: { [key: string]: string } = {};
        switch (state.LangShortName) {
            case LangEnumShortName.EN:
                _langData = en
                break;
            case LangEnumShortName.HI:
                _langData = hi;
                break;

        }
        console.log("_langate", _langData);
        return _langData[key];
    }

    return (
        <LanguageContext.Provider value={{ state, dispatch: { setLanguage, translate } }}>
            {children}
        </LanguageContext.Provider>
    )
}

export default LanguageProvider;

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { BrowserRouter as Router } from 'react-router-dom'
import reportWebVitals from './reportWebVitals';
import './index.css';
import App from './App';
import { Store } from './state';
import LanguageProvider from './context/lang.context';



ReactDOM.render(
  <React.StrictMode>
    <Provider store={Store}>
      <LanguageProvider>
        <Router>
          <App />
        </Router>
      </LanguageProvider>
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();