useTranslation() doesn't work with react-i18next - reactjs

Question

I try to make react-i18next package working but i'm facing an issue.
I have a provider for i18n initialization :
import React, {useState, useEffect, useRef} from 'react';
import {useLocalization} from '#shopify/hydrogen';
import {I18nextProvider} from 'react-i18next';
import i18n from 'i18next';
import {initReactI18next} from 'react-i18next';
import LanguageDetector from 'i18next-browser-languagedetector';
import resourcesToBackend from 'i18next-resources-to-backend';
// Bundle the default translation
import fr from '../assets/locales/fr/translation.json';
i18n
// load other translations dynamically
.use(
resourcesToBackend((language, namespace, callback) => {
import(`../assets/locales/${language}/${namespace}.json`)
.then((resources) => {
callback(null, resources);
})
.catch((error) => {
callback(error, null);
});
})
)
.use(LanguageDetector)
.use(initReactI18next);
export function TranslationProvider({children}) {
const {language} = useLocalization();
const init = useRef(false);
const [i18nInstance, setI18nInstance] = useState(null);
useEffect(() => {
if (init.current) return;
init.current = true;
const cachedLang = localStorage.getItem('i18nextLng');
const defaultLang = language.isoCode.toLowerCase();
if (!cachedLang) {
localStorage.setItem('i18nextLng', defaultLang);
}
// initialize i18next
i18n.init(
{
partialBundledLanguages: true, // This allows some resources to be set on init while others after
fallbackLng: defaultLang,
debug: true,
react: {useSuspense: true, wait: true},
ns: ['translation'],
defaultNS: 'translation',
interpolation: {
escapeValue: false,
},
resources: {
fr: {translation: fr},
},
},
() => {
setI18nInstance(i18n);
}
);
}, [i18n, setI18nInstance, i18nInstance, language]);
return (
i18nInstance && (
<I18nextProvider i18n={i18nInstance}>{children}</I18nextProvider>
)
);
}
Then I call my Provider like this :
<Suspense fallback={'Loading lang..'}>
<TranslationProvider>
<Router>
<FileRoutes
basePath={languageCode ? `/${languageCode}/` : undefined}
/>
<Route path="*" page={<NotFound />} />
</Router>
</TranslationProvider>
</Suspense>
Finally I use it in a component :
import {useTranslation} from 'react-i18next';
const {t} = useTranslation();
{t('footer.language')}
I have no error but it displays :
footer.language instead of the expected translation
When I inspect t, i get [Function: notReadyT]
Does anyone can help me with this ?
Thank you