react-bootstrap-table: insertModalBody not working for me - react-bootstrap-table

Question

My codes (following the example):
class MyCustomBody extends React.Component {
render() {
return (<form>
<div className="form-group"><label>Email</label><input type="text" placeholder="Email" className="form-control editor edit-text"></input></div>
<div className="form-group"><label>Role</label><select placeholder="Role" className="form-control editor edit-select"><option value="Admin">Admin</option><option value="Client">Client</option></select></div>
<div className="form-group"><label>Name</label><input type="text" placeholder="Name" className="form-control editor edit-text"></input></div>
<div className="form-group"><label>Password</label><input type="text" placeholder="Password" className="form-control editor edit-text"></input></div>
</form>);
}
}
class MyDashboard extends Component {
constructor(props) {
super(props);
this.createCustomModalBody = this.createCustomModalBody.bind(this);
}
createCustomModalBody() {
return <MyCustomBody/>;
}
render() {
const options = {
insertModalBody: this.createCustomModalBody
};
return (
<BootstrapTable data={(this.props.users || [])}
options={options}
insertRow
search >
<TableHeaderColumn isKey dataField='_id'>ID</TableHeaderColumn>
<TableHeaderColumn dataField='email'>Email</TableHeaderColumn>
<TableHeaderColumn dataField='role'>Role</TableHeaderColumn>
<TableHeaderColumn dataField='profile' dataFormat={this.nameFormatter}>Name</TableHeaderColumn>
<TableHeaderColumn dataField='password' hidden>Password</TableHeaderColumn>
</BootstrapTable>
);
}
}
Some codes removed. When +new button clicked, the default form shown instead of my customized form. Any ideas? Thanks