Why aren't Route-using components (imported from react-router-dom) not translated with react-i18next?

I am building an app that has a running internationalisation everywhere else but in my Route-using components... here is my i18n.js config file:

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import Backend from 'i18next-http-backend';

i18n
  .use(Backend)
  .use(initReactI18next)
  .init({
    debug: true,
 
    lng: 'en',
    fallbackLng: 'en',
    whitelist: ['en', 'bg'],
 
    interpolation: {
      escapeValue: false, 
    },
 
    backend: {
      loadPath: '/locales/{{lng}}/{{ns}}.json',
    },
    react: {
        useSuspense: false,
    },
});

export default i18n;

I tried with true useSuspense, false; wait also... The versions of my i18next dependencies are as follows:

    "i18next": "^19.5.0",
    "i18next-http-backend": "^1.4.1",
    "i18next-sync-fs-backend": "^1.1.1",
    "react-i18next": "^11.7.0"

This is my call in App.jsx (see below):

<Route exact path="/login" component={Login} />

And this is my index.js file:

import React, { Suspense } from 'react';
import { BrowserRouter } from "react-router-dom";
import ReactDOM from 'react-dom';
import Spinner from 'react-bootstrap/Spinner';
import fontawesome from '@fortawesome/fontawesome';
import {faPlusCircle} from '@fortawesome/free-solid-svg-icons';
import App from './App';
import * as serviceWorker from "./serviceWorker";
import { I18nextProvider } from 'react-i18next';
import i18n from './i18n'

fontawesome.library.add(faPlusCircle);

ReactDOM.render(
    <BrowserRouter>
        <I18nextProvider i18n={i18n}> 
            <Suspense fallback={<Spinner animation="grow" variant="primary" />}>
                <App />
            </Suspense>
        </I18nextProvider>
    </BrowserRouter>,
    document.getElementById('root')
);

serviceWorker.unregister();

I am getting this as a console warning:

i18next.js:22 i18next: hasLoadedNamespace: i18next was not initialized undefined output @ i18next.js:22 i18next.js:22 i18next::translator: key "bg" for languages "en" won't get resolved as namespace "language" was not yet loaded This means something IS WRONG in your setup. You access the t function before i18next.init / i18next.loadNamespace / i18next.changeLanguage was done. Wait for the callback or Promise to resolve before accessing it!!!

Any ideas how to make it work?