JSX variable interpolation doesn't work in <option> children

[jbachhardie]

Describe the bug
If the content of an <option> tag is constructed via JSX interpolation, only the first fragment ends up rendered in the HTML

To Reproduce
Steps to reproduce the behavior:

1. Insert a Select with options like the following

const TestView = () => {
  const stringVariable = "foo";
  return (
    <ContextView title="Get started with Stripe Apps">
      <Select label="Test select">
        <option value="first">JSX concatenation of {stringVariable}</option>
        <option value="second">{`string concatenation of ${stringVariable}`}</option>
      </Select>
    </ContextView>
  );
};

2. See that for the first <option> the rendered text is "JSX concatenation of " whereas the second one renders the full expected value of "string concatenation of foo"

Expected behavior
Both forms of interpolation should result in the same HTML, as they do in vanilla React

Desktop (please complete the following information):

• OS: macOS
• Browser Chrome
• Version 96

[jlongster-stripe]

This is expected. It's how React works: facebook/react#13465

If you just did <option value="first">{stringVariable}</option> you'd see the value. But otherwise it creates a children tree and React doesn't support that with option. Apparently this is fixed in React 18 though.