React plural component insert the react key in the ICU message format

[armandabric]

Describe the bug
After upgrading to v3.6.0 (from v3.2.1), when I run lingui extract it seems to generate an invalid plurals. lingui compile trigger the error:

$ yarn translation:compile
Compiling message catalogs…
/home/armand/workspace/my-project/node_modules/@lingui/cli/api/compile.js:89
    throw new Error("Can't parse message. Please check correct syntax: \"".concat(message, "\""));
    ^

Error: Can't parse message. Please check correct syntax: "{oneAge, plural, key {{oneAge}} zero {<0>0-1 years</0>} one {<1># year</1>} other {<2># years</2>}}"
    at compile (/home/armand/workspace/my-project/node_modules/@lingui/cli/api/compile.js:89:11)
    at /home/armand/workspace/my-project/node_modules/@lingui/cli/api/compile.js:45:51
    at Array.map (<anonymous>)
    at createCompiledCatalog (/home/armand/workspace/my-project/node_modules/@lingui/cli/api/compile.js:37:43)
    at /home/armand/workspace/my-project/node_modules/@lingui/cli/lingui-compile.js:91:66
    at Array.forEach (<anonymous>)
    at /home/armand/workspace/my-project/node_modules/@lingui/cli/lingui-compile.js:61:14
    at Array.forEach (<anonymous>)
    at command (/home/armand/workspace/my-project/node_modules/@lingui/cli/lingui-compile.js:50:18)
    at compile (/home/armand/workspace/my-project/node_modules/@lingui/cli/lingui-compile.js:135:12)

To Reproduce
Steps to reproduce the behavior, possibly with minimal code sample, e.g:

import { Plural } from "@lingui/react"

export default function App() {
    const ageOptions = [1, 10, 18];

    return(
        <select {/* ... */}>
            {ageOptions.map((oneAge) => (
                <Plural
                    key={oneAge}
                    value={oneAge}
                    zero={<option value={oneAge}>{"0-1 years"}</option>}
                    one={<option value={oneAge}>{"# year"}</option>}
                    other={<option value={oneAge}>{"# years"}</option>}
                />
            ))}
       </select>
    );
}

Running lingui extract generate the folowing .po file:

msgid "{oneAge, plural, key {{oneAge}} zero {<0>0-1 years</0>} one {<1># year</1>} other {<2># years</2>}}"
msgstr ""

In the previous lingui version it was extracted like this:

msgid "{oneAge, plural, zero {<0>0-1 years</0>} one {<1># year</1>} other {<2># years</2>}}"
msgstr ""

Expected behavior

The JSX key atrtibute should not be inserted in ICU message.

Additional context
Add any other context about the problem here.

• jsLingui version lingui --version: 3.6.0
• Babel version npm list @babel/core @babel/core@7.13.8
• Your Babel config (e.g. .babelrc) or framework you use (Create React App, Meteor, etc.)

module.exports = {
  presets: ["next/babel"],
  plugins: [
    "macros",
    [
      "babel-plugin-styled-components",
      {
        ssr: true,
        displayName: process.env.NODE_ENV !== "production",
      },
    ],
  ],
};

• My lingui.config.js

module.exports = {
  compileNamespace: "cjs",
  locales: ["en", "fr"],
  sourceLocale: "en",
  fallbackLocales: {
    default: "en",
  },
  format: "po",
  catalogs: [
    {
      path: "<rootDir>/src/translations/messages/{locale}",
      include: ["<rootDir>/src"],
      exclude: ["**/.next/**"],
    },
  ],
};

[semoal]

I'll release a new version with this change fixed, thanks for reporting it out mate

[semoal]

Released 3.7.0