Manage sorting external

manage-sort-table.jsx

class ExternalSort extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      sortName: undefined,
      sortOrder: undefined
    };
    this.onSortChange = this.onSortChange.bind(this);
  }

  onSortChange(sortName, sortOrder) {
    console.info('onSortChange', arguments);
    this.setState({
      sortName,
      sortOrder
    });
  }

  render() {
    const options = {
      sortName: this.state.sortName,
      sortOrder: this.state.sortOrder,
      onSortChange: this.onSortChange
    };
    return (
      <div>
        <p style={ { color: 'red' } }>sort: sortName={ this.state.sortName }, sortOrder={ this.state.sortOrder }</p>
        <BootstrapTable data={ products } options={ options }>
          <TableHeaderColumn dataField='id' isKey dataSort>Product ID</TableHeaderColumn>
          <TableHeaderColumn dataField='name' dataSort>Product Name</TableHeaderColumn>
          <TableHeaderColumn dataField='price'>Product Price</TableHeaderColumn>
        </BootstrapTable>
      </div>
    );
  }
}

I have server side sorting of data. server call is made in onSortChange and the returned data is set to table.
So clicking on Header, this happens
(1) Current data/rows displayed in table gets sorted and
(2) Once the call to server is back in onSortChange, the table data is modified again

Ideally (1) should not be happening. Also this happens only for the first time clicking on the header for sort. On consecutive clicks on header (1) is not seen.
So, is this right way of server side sorting ?