i18next-http-backend not working on production

I am using i18next for transalation with i18next-http-backend to get the translation files. My codes works on development but not on production, it's a vite application.
i have tried a couple of suggestion by using different i18next-http-backend version like the v1.2.4 but still same as suggested here link

The debug is showing

My config file

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

i18n
  .use(initReactI18next)
  .use(backend)
  .init({
    fallbackLng: "en",
    lng: "en",
    backend: {
      loadPath: "src/i18n/locales/{{lng}}.json",
      addPath: "src/i18n/locales/add/{{lng}}",
    },
    interpolation: { escapeValue: false },
    debug: true,
  });

export default i18n;

function App() {
  return (
    <Suspense fallback={<Spinner/>}>
      <Routes>
        <Route path="/" element={<LandingPage />} />
       
      </Routes>
    </Suspense>
  );
}

export default App;

Check routes of your translations files. You have 404 eroror in console. Use public folder.

Files should be at public/src/i18n/locales/{{lng}}.json

and public/src/i18n/locales/add/{{lng}}.json

But maybe will be correctly to change it to public/i18n/locales/{{lng}}.json.

Config will be:

loadPath: "i18n/locales/{{lng}}.json",
addPath: "i18n/locales/add/{{lng}}",

https://react.i18next.com/legacy-v9/step-by-step-guide#a-add-an-additional-language-file