I am currently internationalizing my React application using react-i18next and have encountered a scenario where I need to manage language translation in two distinct contexts:

1. Converting the entire application from English to French, providing users with an option to switch the language for the entire app.
2. Allowing for language changes for specific components and events within the app, without affecting the language of the entire application.

Background:

• I am implementing internationalization for my React app using react-i18next.
• The app already has some level of internationalization implemented.
• I need to retain the existing language changes for specific components while implementing language conversion for the entire application.

Explanation:
To clarify, there are essentially two points where language conversion occurs:

1. Global: Changing the language of the entire application via a dropdown, affecting all components.
2. Local: Changing the language of specific components or events without impacting the rest of the application.

I am seeking guidance on implementing a mechanism to manage language changes at both the application and component levels independently.

I have read the documentation but couldn’t find anything that can help separate the contexts.

Any insights, examples, or best practices on achieving this separation effectively using react-i18next would be highly appreciated.