Format React Components

I am trying to figure a work around to the way the Code Formatter formats React components. 

For example this code from my App.js:

render() {
  return (
    <div>
      <Header currentUser={this.state.currentUser} />
      <Switch>
        <Route exact path='/' component={HomePage} />
        <Route path='/shop' component={ShopPage} />
        <Route path='/signin' component={SignIn} />
      </Switch>
    </div>
  );
}

When I use the coee formattor is reconfigured to:

render() {
  return (
    <div>
      <Header currentUser={this.state.currentUser} /> <Switch> <Route exact path='/' component={HomePage} /> <Route
      path='/shop' component={ShopPage} /> <Route path='/signin' component={SignIn} /> </Switch>
    </div>
  );
}

Is there a setting that would help with this mess?