При обновлении экрана ссылки перемещаются слева направо в центр

Question

У меня есть это AppBar:

<AppBar position="static">
  <Toolbar>
    <Link to="/">
      <IconButton aria-label="Home" style={isActive(history, "/")}>
        <HomeIcon/>
      </IconButton>
    </Link>
    {
    !auth.isAuthenticated() && (<span style={{ marginLeft: "auto", marginRight: -12 }}>
        <Link to="/signin">
          <Button style={isActive(history, "/signin")}>Sign In
          </Button>
        </Link>
      </span>)
    }
    {
      auth.isAuthenticated() && (<span>
        <Link to="/issues">
          <Button style={isActive(history, "/issues")}>Issues
          </Button>
        </Link>
        <Link to="/users">
          <Button style={isActive(history, "/users")}>Users
          </Button>
        </Link>
        <Link to="/signup">
          <Button style={isActive(history, "/signup")}>Create User
          </Button>
        </Link>
      </span>)
    }
    {
      auth.isAuthenticated() && (<span  style={{ marginLeft: "auto", marginRight: -12 }}>
        <Link to={"/user/" + auth.isAuthenticated().user._id}>
          <IconButton aria-label="MyProfile" style={isActive(history, "/user/" + auth.isAuthenticated().user._id)}>
            <AccountCircle/>
          </IconButton>
        </Link>
        <Button color="inherit" onClick={() => {
            auth.signout(() => history.push('/'))
          }}>Sign Out</Button>
      </span>)
    }
  </Toolbar>
</AppBar>

Когда я не вошел в систему, все выглядит так, как должно.Значок Home находится слева, а Sign In - справа:

Если я войду в систему, все будет выглядеть как положено.Значок Home, ссылки Issues, Users и Create User отображаются слева, а значок My profile и ссылка Log out отображаются справа:

Так и остается, даже если я нажимаю между разными ссылками.Однако, если я перехожу на свою страницу, нажимая кнопку обновления в браузере или нажимая клавишу F5, ссылки Issues, Users и Create User перемещаются в центр:

Как я могу предотвратить это?