i18next translation is 404 Not Found in Storybook with i18next-http-backend

Question

I tried integrating i18next to my Storybook with i18next-http-backend and it is trying to load the translations file from http://localhost:6006/public/locales/en/translation.json but gets a 404. I have my language files inside my app/public directory ( app is a sibling of stories and .storybook directories )

My storybook i18next.js looks like below,

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


const ns = ['translation'];
const supportedLangs = ['en', 'es'];

i18n.use(initReactI18next)
  .use(HttpApi)
  .init({
    //debug: true,
    lng: 'en',
    fallbackLng: 'en',
    interpolation: {
      escapeValue: false,
    },
    defaultNS: 'translation',
    ns,
    supportedLangs,
  });

supportedLangs.forEach((lang) => {
  ns.forEach((n) => {
    i18n.addResources(
      lang,
      n,
      require(`../app/public/locales/${lang}/${n}.json`)
    );
  });
});

export {i18n};

I tried adding loadPath configs also ( following [this][2] ) but still getting the issue.

  .init({
    //debug: true,
    lng: 'en',
    fallbackLng: 'en',
    ...
    backend: {
      loadPath: `/public/locales/{{lng}}/{{ns}}.json?lng={{lng}}&{{ns}}`,
      // loadPath: `/locales/{{lng}}/{{ns}}.json?lng={{lng}}&{{ns}}`, tried this too
    },

---

Following is how my .storybook/preview.js looks like

import { muiTheme } from 'storybook-addon-material-ui';
import { theme } from '@internal/component-library';
import {i18n} from './i18next.js';

export const decorators = [
  muiTheme([theme])
];
export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
  i18n,
  locale: 'en',
  locales: {
    en: 'English',
    es: 'Spanish',
  },
}

My package.js has the following scripts for Storybook

"scripts": {
  ...  
  "storybook": "start-storybook -p 6006",
  "build-storybook": "build-storybook"
}