React-i18next translation only after component re-rendered

I have a page using Next and react-i18next of both English and French.
Now the issue is if I have set language to Frn and refresh, it still show english contents.
I found two wired things:

1. If i remove SSR contents, ie, getServersideProps, french translation would show up.
2. Anything that would trigger a component re-render would update the translate. (eg: if a child is re-rendered, the child would have frn, but all parents still in english)

codes:
pages/.../indexs.tsx

export const getServerSideProps: GetServerSideProps = async ({ req }) => {
  // async requests
  return {
    props: { ...props },
  };
  return {
    props: {...},
  };
};

export default function Page(props) {
  const { t } = useTranslation();
  // other hooks
  return (
    <>
      <h2>{t('page title') + temp}</h2>
      // ... other components
    </>
  )
}

initi18n.ts:

export const initI18n = async () =>
  await i18n
    .use<ThirdPartyModule>(initReactI18next)
    .init({
      resources: {
        en: {
          common: commonEn,
        },
        fr: {
          common: commonFr,
        },
      },
      ns: ['common'],
      defaultNS: 'common',
      lng: 'en',
      fallbackLng: 'en',
      interpolation: {
        escapeValue: false,
      },
      debug: true,
    });

_app.tsx(root component):

initI18n().then(
  () => undefined,
  () => undefined,
);

function MyApp({})

i18n debug log:
i18next: languageChanged en
i18next: initialized {...}
i18next::translator: missingKey (some english keys are missing, which should be fine)
i18next: languageChanged fr

My own investigate is following:
In one useEffect, it get selectedLang from local storage (or default to english) => and call i18n.changeLanguage(currLang). Thats why in the log, it first set to eng and then frn.
But I cannot figure out why it didnt render the changes after setting lang to frn.

Tried a codesandbox but failed. Any help would be appreciated.