Как поместить Button, после Tabs Material UI?

Question

[SecDet]

Вот так выглядит AppBar. Нужно,чтобы кнопка была на уровне с Tabs и справа. Получилось только если вставить внутри Tabs.Но это плохо. Может кто-нибудь подсказать, как исправить? Вот jsx компонента:

import React from "react";
import { withRouter } from "react-router-dom";
import {
  AppBar,
  Tabs,
  Tab,
  Typography,
  withStyles,
  Button,
  Toolbar
} from "@material-ui/core";
import ListIcon from "@material-ui/icons/List";
import StarIcon from "@material-ui/icons/Star";

function TabContainer(props) {
  return (
    <Typography component="div" style={{ padding: 8 * 3 }}>
      {props.children}
    </Typography>
  );
}

const styles = theme => ({
  root: {
    flexGrow: 1,
    backgroundColor: theme.palette.background.paper
  },
  flexContainer: {
    justifyContent: "center"
  },
  button: {
    width: "100px"
  }
});

@withRouter
class ScrollableTabsButtonForce extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      value: this.props.location.pathname
    };
  }

  handleChange = (event, value) => {
    this.setState({ value });
    this.props.history.push(value);
  };

  render() {
    const { classes } = this.props;
    const { value } = this.state;

    return (
      <div className={classes.root}>
        <AppBar position="static" color="default">
          <Tabs
            value={value}
            onChange={this.handleChange}
            scrollable
            scrollButtons="on"
            indicatorColor="primary"
            textColor="primary"
            classes={{
              flexContainer: classes.flexContainer
            }}
          >
            <Tab label="GAMES" icon={<ListIcon />} value="/games" />
            <Tab label="LEADERS" icon={<StarIcon />} value="/leaders" />
          </Tabs>
          <Button className={classes.button}>Login</Button>
        </AppBar>
      </div>
    );
  }
}

export default withStyles(styles)(ScrollableTabsButtonForce);