t`` macro doesn't work when load and activate message

[ws-rush]

Describe the bug
All messages defined with t`` macro doesn't change when load new lang, until we reload page

To Reproduce

in this repo examples/vite-project-react-babel change like following

Expected behavior
you can see same line with t`` doesn't change but with is change, both are imported from @lingui/macro

• jsLingui version >=4.1.2
• Babel version 7.21.3
• Macro support:
• I'm using SWC with @lingui/swc-plugin
• I'm using Babel with babel-macro-plugin
• I'm not using macro
• Your Babel config (e.g. .babelrc) or framework you use (Create React App, NextJs, Vite)

import { defineConfig } from "vite"
import react from "@vitejs/plugin-react"
import { lingui } from "@lingui/vite-plugin"

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react({
      babel: {
        plugins: ["macros"],
      },
    }),

    lingui(),
  ],
})

[thekip]

Here is an issue with an example itself. The app component doesn't get re-rendered since nothing changed from React's point of view.

So the solution would be splitting to root component with provider and children components to be able to use useLingui hook and let LinguiProvider re-trigger render of components subtree

function App() {
  useEffect(() => {
    loadCatalog("en")
  }, [])

  return (
    <I18nProvider i18n={i18n}>
      <AppContent />
    </I18nProvider>
  )
}

function AppContent() {
  const [count, setCount] = useState(0)

  const { i18n } = useLingui()

  return (
    <div className="App">
      <div>
        <a href="https://vitejs.dev" target="_blank">
          <img src={viteLogo} className="logo" alt="Vite logo" />
        </a>
        <a href="https://reactjs.org" target="_blank">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
        <a href="https://lingui.dev" target="_blank">
          <img src={linguiLogo} className="logo react" alt="Lingui logo" />
        </a>
      </div>
      <h1>Vite + React + Lingui</h1>
      <div className="card">
        <button onClick={() => setCount((count) => count + 1)}>
          <Plural value={count} one="# month" other="# months" />
        </button>
        <p>
          <Trans>
            Edit <code>src/App.tsx</code> and save to test HMR
          </Trans>
        </p>
        <p>
          <button
            style={{ marginRight: "20px" }}
            onClick={() => loadCatalog("pl")}
          >
            Polish
          </button>
          <button onClick={() => loadCatalog("en")}>English</button>
        </p>
      </div>
      <p className="read-the-docs">
        <Trans>Click on the Vite and React logos to learn more</Trans>
        <br />

        {t(i18n)`Click on the Vite and React logos to learn more`}

        {/* or */}
        {i18n._(msg`Click on the Vite and React logos to learn more`)}

        {/* or in >lingui@4.4, export underscore from useLingui hook https://github.com/lingui/js-lingui/pull/1721*/}
        {_(msg`Click on the Vite and React logos to learn more`)}
      </p>
    </div>
  )
}

export default App