Remix hydration error with i18n translation: "Text content does not match server-rendered HTML"

Question

Title: Remix hydration error with i18n translation: "Text content does not match server-rendered HTML"

Question:

I am working on a Remix project and have integrated i18n translation. However, I am encountering several hydration errors when trying to render my content. The primary error message I'm seeing is "Text content does not match server-rendered HTML".

Error Logs:

[Error] Warning: An error occurred during hydration...
[Error] Error: Text content does not match server-rendered HTML...
[Error] Error: Hydration failed because the initial UI does not match...
[Error] TypeError: undefined is not an object...
[Error] Error: Hydration failed because the initial UI does not match...
[Error] Error: There was an error while hydrating...

Can anyone guide me on how to diagnose and fix these hydration issues with Remix and i18n translations?

Code Snippet:

<Document lang={lang}>
    <I18nextProvider i18n={i18n}>
        <Layout>
            <Outlet />
        </Layout>
    </I18nextProvider>
</Document>