Кнопка раскрывающегося списка React-Bootstrap не работает должным образом

Я не могу правильно отобразить кнопку DropDown. См. созданный пример jsbin. Не могу понять, что я делаю неправильно.

JSBin

const Hello = (props) => {
  console.log(props)
  let Media = ReactBootstrap.Media
  let Image = ReactBootstrap.Image
  let DropdownButton = ReactBootstrap.DropdownButton
  let MenuItem = ReactBootstrap.MenuItem
  let ButtonToolbar = ReactBootstrap.ButtonToolbar
  return (
  <div>
  <p>Hi {props.name.title}</p>
    <ButtonToolbar>
    <DropdownButton title = "Test" id = "test" key = "1">
   <MenuItem key = "1" eventKey="1">1</MenuItem>
    </DropdownButton>
    </ButtonToolbar>    
  </div> 
  )
}

class App extends React.Component{
  constructor(props) {
    super(props);
    this.state = {
      globus:{
        title:"DropDown Button",
        actors:["h","i","j"]
      }

    };
  }

  render() {
    return (<div className="app">
        <Hello name={this.state.globus} />
      </div>);
  }
}

ReactDOM.render(<App />, document.getElementById('app'));

Любая помощь высоко ценится

Ваше здоровье!