react-i18next addResourceBundle is not a function - reactjs

Question

I'm using react-i18next to internationalize my react app. When I trying to addResourceBundle on each module's config files it throws this error:
TypeError:
i18next__WEBPACK_IMPORTED_MODULE_0__.default.addResourceBundle is not
a function
Therefore, I added i18next.init command before addResourceBundle. Then it works, but show below warning and reset previously selected locale.
i18next: init: i18next is already initialized. You should call init
just once!
This is my i18n.tsx file
import i18n from 'i18next'
import Backend from 'i18next-http-backend'
import LanguageDetector from 'i18next-browser-languagedetector'
import { initReactI18next } from 'react-i18next'
i18n
.use(Backend)
.use(LanguageDetector)
.use (initReactI18next)
.init({
fallbackLng: 'en',
debug: true,
detection: {
order: ['queryString', 'cookie'],
cache: ['cookie']
},
interpolation: {
escapeValue: false
},
react: {
wait: true,
useSuspense: false,
}
})
export default i18n;
This is my Module's Config file
import i18next from 'i18next';
import { lazy } from 'react';
import en from '../../i18n/dashboard/en';
import si from '../../i18n/dashboard/si';
import ta from '../../i18n/dashboard/ta';
i18next.init({ resources: {} });
i18next.addResourceBundle('en', 'dashboard', en);
i18next.addResourceBundle('si', 'dashboard', si);
i18next.addResourceBundle('ta', 'dashboard', ta);
const DashboardConfig = {
settings: {
layout: {
mode : 'default'
}
},
routes: [
{
path: '/dashboard',
component: lazy(() => import('./Dashboard')),
auth : ['admin', 'user', 'DASHBOARD_VIEW'],
}
]
};
export default DashboardConfig;

Answer 1

it happens, because you are importing i18next in your module instead of created instance in i18n.tsx.
it should be like this:
import i18next from 'path/to/i18n.tsx';