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 your translationsimport 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,  },});// Define a type for your translation keystype TranslationKeys = keyof typeof translateen['translation'];// Define the useTranslation hook with the correct typeexport const useTranslation = () => useTranslationBase<TranslationKeys>();export default i18n;

This is my App.tsx code

import React, {useState} from 'react';//import './locales/i18n';import {View, Text, Pressable} from 'react-native';//import {useTranslation} from 'react-i18next';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

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