How to fix i18next::translator: missingKey en error in React native?

I am creating a react native application for Android. I want to do language translation using i18next. I get the following error when I deploy my app

 LOG  i18next::translator: missingKey en translation hello hello LOG  i18next::translator: missingKey en translation this line is translated this line is translated LOG  i18next: languageChanged hi LOG  hi LOG  i18next::translator: missingKey hi translation hello hello LOG  i18next::translator: missingKey hi translation this line is translated this line is translated LOG  i18next::translator: missingKey hi translation hello hello LOG  i18next::translator: missingKey hi translation this line is translated this line is translated

This is i18n.tsx code

import i18n from 'i18next';import { initReactI18next } from 'react-i18next';import { useTranslation as useTranslationBase } from 'react-i18next';import LanguageDetector from 'i18next-browser-languagedetector';import translateen from './en.json';import translatehi from './hi.json';// Initialize i18n with the translations and configuration optionsi18n.use(LanguageDetector).use(initReactI18next).init({  resources: {    en: { translation: translateen },    hi: { translation: translatehi },  },  fallbackLng: 'en',  lng: 'en',  debug: true,  interpolation: {    escapeValue: false,  },});type TranslationKeys = keyof typeof translateen['translation'];export const useTranslation = () => useTranslationBase<TranslationKeys>();export default i18n;

This is my App.tsx code

import React, {useState} from 'react';import {View, Text, Pressable} from 'react-native';import {useTranslation} from './locales/i18n';const App: React.FC = () => {  const {t, i18n} = useTranslation();  const [currentLanguage, setLanguage] = useState<string>('en');  const changeLanguage = (value: string) => {    i18n      .changeLanguage(value)      .then(() => setLanguage(value))      .catch((err: Error) => console.log(err));    console.log(i18n.language);  };  return (<View      style={{        flex: 1,        backgroundColor: 'white',        alignItems: 'center',        justifyContent: 'space-evenly',      }}><Text style={{fontWeight: 'bold', fontSize: 25, color: '#33A850'}}>        {t('hello')}</Text><Text style={{fontWeight: 'bold', fontSize: 25, color: '#33A850'}}>        {t('this line is translated')}</Text><Pressable        onPress={() => changeLanguage('en')}        style={{          backgroundColor: currentLanguage === 'en' ? '#33A850' : '#d3d3d3',          padding: 20,        }}><Text>Select English</Text></Pressable><Pressable        onPress={() => changeLanguage('hi')}        style={{          backgroundColor: currentLanguage === 'hi' ? '#33A850' : '#d3d3d3',          padding: 20,        }}><Text>हिंदीकाचयनकरें</Text></Pressable></View>  );};export default App;

Following is my hi.json code which is present in locales folder

{"translation": {"hello":"नमस्ते","this line is translated":"यहपंक्तिअनुवादितहै"  }}

I have no clue how to fix this. I have referred the following links

react i18next throws translator missingKey en translation and useTranslation() hooks not working

Getting i18next translator Missing key

I even modified my i18n.tsx code to the following

import i18n from 'i18next';import { initReactI18next } from 'react-i18next';import LanguageDetector from 'i18next-browser-languagedetector';import translateen from './en.json';import translatehi from './hi.json';i18n.use(initReactI18next).init({  resources: {    en: { translation: translateen },    hi: { translation: translatehi },  },  fallbackLng: 'en',  lng: 'hi',  debug: true,  interpolation: {    escapeValue: false,  },});export default i18n;

and my App.tsx to the following

import React, {useState} from 'react';import './locales/i18n';import {View, Text, Pressable} from 'react-native';import {useTranslation} from 'react-i18next';const App: React.FC = () => {  const {t, i18n} = useTranslation();  const [currentLanguage, setLanguage] = useState<string>('en');  const changeLanguage = (value: string) => {    i18n      .changeLanguage(value)      .then(() => setLanguage(value))      .catch((err: Error) => console.log(err));    console.log(i18n.language);  };  return (<View      style={{        flex: 1,        backgroundColor: 'white',        alignItems: 'center',        justifyContent: 'space-evenly',      }}><Text style={{fontWeight: 'bold', fontSize: 25, color: '#33A850'}}>        {t('hello')}</Text><Text style={{fontWeight: 'bold', fontSize: 25, color: '#33A850'}}>        {t('this line is translated')}</Text><Pressable        onPress={() => changeLanguage('en')}        style={{          backgroundColor: currentLanguage === 'en' ? '#33A850' : '#d3d3d3',          padding: 20,        }}><Text>Select English</Text></Pressable><Pressable        onPress={() => changeLanguage('hi')}        style={{          backgroundColor: currentLanguage === 'hi' ? '#33A850' : '#d3d3d3',          padding: 20,        }}><Text>हिंदीकाचयनकरें</Text></Pressable></View>  );};export default App;

But still I'm not able to solve this. Any suggestions?