Never mind, I found an easy way to adapt this using multiple instances of react-i18next from this GitHub issue. Guess I'm overthinking it.

Just create a global instance and another instance, each of which loads different translations. Then wrap the global app with <I18NextProvider i18n={globalInstance} /> and use the other instance in the child component, either wrap the component with the same I18NextProvider or using the hook const { t } = useTranslation('banner', { i18n: childInstance });. Note that you should be aware of the namespace, as they load from different files.