When using react-i18next, you need to pass in an i18next instance by using the
initReactI18next function.

Here is an example of how you can do it:

    // Import the necessary packages
    import React from 'react';
    import ReactDOM from 'react-dom';
    import { initReactI18next } from 'react-i18next';
    import i18n from 'i18next';

    // Import your translations files and other configurations
    import translationEN from './locales/en/translation.json';
    import translationFR from './locales/fr/translation.json';

    // Set your i18next instance
    i18n
      .use(initReactI18next) // Pass the initReactI18next function
      .init({
        resources: {
          en: {
            translation: translationEN, // English translations
          },
          fr: {
            translation: translationFR, // French translations
          },
        },
        lng: 'en', // Default language
        fallbackLng: 'en', // Fallback language
        interpolation: {
          escapeValue: false,
        },
      });

    // Create your app component
    const App = () => {
      const { t } = useTranslation(); // Use the useTranslation hook to access translations

      return (
        

          
{t('hello')}
          
{t('description')}
        
      );
    };

    // Render your app component
    ReactDOM.render(, document.getElementById('root'));
  

In this example, we import the necessary packages (React, ReactDOM,
initReactI18next, and i18n), as well as the translation files for English and French.
We then set up our i18next instance using the init function, including the resources for each language,
the default and fallback language, and the interpolation configuration.

We create our app component, using the useTranslation hook from react-i18next to access the translations.
We can use the t function to translate the specific keys in our translation files.

Finally, we render our app component and mount it on a root element in the HTML document.