Select macro code cannot work after migrating from v4 to v5

[cywhale]

import { Trans, Select } from "@lingui/react/macro"

const MyComponent = (props) => {

return (
  <div>
         <label>
            <Trans><Select value={isFlag} true="Text A" false="Text B" /></Trans>
          </label>  
  </div>
)
}

in src/locales/en/messages.po, it has

msgid "{isFlag, select, true {Text A} false {Text B}}"

The code can work in Lingui v4.14.1, now I migrate to v5.3.2. I had remove old yarn.lock, reinstall by yarn install and then re-extract and compile by yarn extract, yarn compile. All pass without warning and errors.
When run my fronend in development on browser, there is no error as well, but the UI just cannot show the "Text A" or "Text B". But when I return back to v4.14.1, it can show correctly.
All other functions in my frontend which use Lingui works well for V5, just the Select macro cannot work.
My package.json related:

  "devDependencies": {
    "@lingui/babel-plugin-lingui-macro": "^5.3.2",
    "@lingui/cli": "5.3.2",
    "@lingui/core": "5.3.2",
    "@lingui/vite-plugin": "5.3.2",
#...
    "vite": "^6.3.5",
  },
  "dependencies": {
    "@lingui/react": "5.3.2",
#...
  }

Is there anything wrong I use Select macro in V5? Thanks.

[timofei-iatsenko]

It's all the same between v4 and v5, nothing changed significantly.

From what i've see you don't need to wrap <Select> into another <Trans>, but that still shouldn't be a problem.

What you mean by

just the Select macro cannot work.

Does it print ids instead of messages? or it doesn't print anything?

[cywhale]

It doesn't print anything. From chrome devtools, the element viewer only show <label /> without any text on it.

[cywhale]

I find a workaround

import { useLingui } from "@lingui/react"

const MyComponent = (props) => {
  const { i18n, _ } = useLingui()

  return (
    <div>
         <label>
             i18n._(
               /*i18n*/
               { id: "{isFlag, select, true {Text A} false {Text B}}",
                 message: "{isFlag, select, true {Text A} false {Text B}}",
                 values: { isFlag } })
          </label>  
    </div>
  )
}                    

Redo yarn extract and yarn compile, then the Text A or Text B and the translation all wok well. Though I'm not sure why <Select /> cannot work.