Translation files ignored with "rejecting language code not found in supportedLngs" warning

🐛 Bug Report

I am writing a React SPA with i18next and react-i18next using create-react-app. When I load my app in the browser, I get many warnings of the following kind:

i18next.js:22 i18next::languageUtils: rejecting language code not found in supportedLngs: en-GB
i18next.js:22 i18next::languageUtils: rejecting language code not found in supportedLngs: en

as well as

i18next.js:22 i18next::translator: key "navBar.signIn" for languages "" won't get resolved as namespace "common" 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!!!

I don’t know why this happens, because all my translation files are present, in particular the en-GB one, and I use the <Suspense/> component.

To Reproduce

My index.tsx looks like this:

import React, { Suspense } from "react"
import ReactDOM from "react-dom"
import { BrowserRouter } from "react-router-dom"
import { MsalProvider } from "@azure/msal-react"

import App from "./App"
import { msalInstance } from "./auth"
import "./i18n"

function LoadingComponent() {
    return (
        <div>
            <h1>Loading...</h1>
        </div>
    )
}

ReactDOM.render(
    <React.StrictMode>
        <BrowserRouter basename={process.env.PUBLIC_URL}>
            <MsalProvider instance={msalInstance}>
                <Suspense fallback={<LoadingComponent/>}>
                    <App />
                </Suspense>
            </MsalProvider>
        </BrowserRouter>
    </React.StrictMode>,
    document.getElementById("root")
)

My i18n.ts looks like this:

import i18next, { InitOptions } from "i18next"
import HttpApi from "i18next-http-backend"
import { initReactI18next } from "react-i18next"

const options: InitOptions = {
    supportedLngs: ["en-GB", "de-DE", "zh-CN"],
    lng: "en-GB",
    fallbackLng: "en-GB",
    interpolation: {
        escapeValue: false // React already prevents XSS attacks
    },
    ns: ["common", "device", "myDevices"],
    defaultNS: "common",
    debug: process.env.NODE_ENV === "development"   
}

i18next
    .use(HttpApi)
    .use(initReactI18next)
    .init(options)

and my public folder contains the translation files: locales