Handle React translations on component level - reactjs

Question

What i want to achieve is that i have translations available for all components itself. When i install those components they should render on its own. Another thing that i want to achieve is that my project can overrule translations on component level. This in case if somebody decides that the translations that is in there is not what we want.
What i did in my components is loading i18n:
import i18n from 'i18next';
import XHR from 'i18next-xhr-backend';
import Cache from 'i18next-localstorage-cache';
import LanguageDetector from 'i18next-browser-languagedetector';
i18n
.use(XHR)
.use(Cache)
.use(LanguageDetector)
.init({
backend: {
loadPath: '../dist/locales/{{lng}}/{{ns}}.json',
},
fallbackLng: 'en',
react: {
wait: true
},
ns: ['authentication'],
defaultNS: 'authentication',
debug: false,
cache: {
enabled: true
},
interpolation: {
escapeValue: false, // not needed for react!!
formatSeparator: ',',
format: function(value, format) {
if (format === 'uppercase') return value.toUpperCase();
return value;
}
}
});
export default i18n;
This is working fine in my storybook but when i load this in my main project, it is using ../ from my build root which is actually not the component itself but my main implementation project.
How can i solve it and how can i ensure that i can even extend this?
UPDATE:
Below a list of the current folder structure like asked in below questions:
#Component
dist
--.gitkeep
--locales
--commonjs
--es
src
--actions
----index.js
--components
----compname
------index.js
--reducers
----foo.js
--i18n.js
--index.js
test
.babelrc
package.json
Jenkinsfile
#Project
react
--assets
----css
------app.scss
--dist
----.gitkeep
--src
----index.js
----store.js
webpack.config.js
Thanks