Import sources within a group must be alphabetized., cant find the right order

I have this simple code below and I got this error when building, but its not clear for me what the order of my imports should be.

  import * as React from 'react';
    import './App.css';
    import logo from './logo.svg';
    import { DefaultButton } from 'office-ui-fabric-react/lib/Button';


    class App extends React.Component {
      public render() {
        return (
          <div className="App">
            <DefaultButton
      text='See Button'
      primary={ true }
      href='#/components/button'
    />
            <header className="App-header">
              <img src={logo} className="App-logo" alt="logo" />
              <h1 className="App-title">Welcome to React</h1>
            </header>
            <p className="App-intro">
              To get started, edit <code>src/App.tsx</code> and save to reload.
            </p>
          </div>
        );
      }
    }

    export default App;

Set these in your tslint.json:

  "rules": {
    "ordered-imports": [false],
    "object-literal-sort-keys": [false]
  }