Import multiple files dynamically and pass to LocalizedStrings using ‘react-localization’

I’m using ‘react-localization’ for my localization.
and wanted to fetch JSON files dynamically.
To fetch JSON files i’m using ‘require.context’ but unable to use.

.ts file

import LocalizedStrings from 'react-localization';
var context = require.context('./../assets/i18n/', false);
var files:any={};
context.keys().forEach((filename)=>{
  if(!filename.endsWith(".json")){
     files[filename.substr(2)] = context(filename);
  }
});
const Locale = new LocalizedStrings(files);
export default Locale;

.tsx file

import React, { useState } from "react";
import Locale from '../../libraries/localization';
export const Login: React.FC = () => {
 return (<div className="main-container">
    <p className="section-header">{Locale.login_page.page_title}</p>
   </div>
  )
}

Im able to get my Json dynamically, but typescript giving error in .tsx file saying “Property ‘ login_page’ does not exist on type ‘LocalizedStringsMethods’.

Please advise how i can fetch multiple json and assign to LocalizedStrings.

Note: when i import json files like “import en from “./../assets/i18n/en.json” and pass it to LocalizedStrings as LocalizedStrings({en}) it works fine. but i dont want to follow this approach.
need to fetch jsons at runtime.

Source: ReactJs