no html/jsx indentation in jsx-mode

no html/jsx indentation in jsx-mode

For some reason the html/jsx in my react source files always wants to indent as follows, i.e. there is almost no indentation:

return (
  <DateRangePicker ranges={this.state.ranges} startDate={this.state.startDate} endDate={this.state.endDate}
  onApply={this.applyEvent}>
    <Button className="selected-date-range-btn" style={{width : '250px'}}>
    <div className="pull-left">
    <Glyphicon glyph="calendar"/>
    </div>
    <div className="pull-right"><span>{label}</span></div>
    </Button>
  </DateRangePicker>
)

What I'd really like is something like the following:

<DateRangePicker ranges={this.state.ranges} startDate={this.state.startDate} endDate={this.state.endDate}
             onApply={this.applyEvent}>
    <Button className="selected-date-range-btn" style={{width : '250px'}}>
        <div className="pull-left">
            <Glyphicon glyph="calendar"/>
        </div>
        <div className="pull-right"><span>{label}</span></div>
    </Button>
</DateRangePicker>

This is the indentation I get when I copy the html/jsx to the scratch buffer with html-mode or web-mode enabled. As you can see, the indentation is much more readable and it works like this whether I use html-mode or web-mode.

How can I make my react source files indent the html/jsx like this?