How to use Meteor Reactive Container where a ReactNode is expected

Semantic UI has a dropdown example that takes a React node as a trigger

const trigger = (
  <span>
    <Image avatar src={faker.internet.avatar()} /> {faker.name.findName()}
  </span>
)

const options = [
  { key: 'user', text: 'Account', icon: 'user' },
  { key: 'settings', text: 'Settings', icon: 'settings' },
  { key: 'sign-out', text: 'Sign Out', icon: 'sign out' },
]

const DropdownImageTriggerExample = () => (
  <Dropdown trigger={trigger} options={options} pointing='top left' icon={null} />
)

In Meteor, I need to wrap the trigger in a Reactive container because Meteor.user().username may not be ready when the page is rendered

const UserName = ({ username }) => (<span><Icon name="user" />{username}</span>)

const UserNameContainer = createContainer(() => {
    const user = Meteor.user()
    return { username :  user && user.username || "unknown" }
}, UserName)

<UserNameContainer /> // <-- this works
<Dropdown trigger={UserNameContainer} options={options} icon={null} />

But React doesn’t like it inside of the trigger

Failed prop type: Invalid prop `trigger` supplied to `Dropdown`, expected a ReactNode.

When you print to the console the objects you notice they are not the same types

Object {$$typeof: Symbol(react.element), type: "div", key: null, ref: null, props: Object…}

vs

 function ReactMeteorData() {                                                                         // 6
        (0, _classCallCheck3.default)(this, ReactMeteorData);

Therefore I am not very surprised. But I can’t find how to achieve the desired reactivity.