React Bootstrap remote row insert - reactjs

Question

I am attempting insert a row into a table once it has been successfully stored in the database.
I am getting the following error:
Warning: Each child in a list should have a unique "key" prop.
I have added the "rowKey="id" parameter to the table component but I am still facing the same issue.
import React, { Component} from "react";
import editImage from '../../src/images/edit.png';
import './Payrolls.css';
import {BootstrapTable,TableHeaderColumn, RemoteInsertRow} from 'react-bootstrap-table';
import '../../node_modules/react-bootstrap-table/css/react-bootstrap-table.css'
import { Link } from 'react-router-dom'
import axios from "axios";
var currentComponent = null;
class Payrolls extends Component {
componentDidMount() {
this.getData();
}
constructor(props, context) {
super(props, context);
this.tableData = [Array]
this.state = {
tableData: [],
selected: []
};
this.getData = this.getData.bind(this);
this.onAddRow = this.onAddRow.bind(this);
}
getData = () => {
var self=this;
axios.get('http://******.co.uk/payrolls.php', {
})
.then(function (response) {
self.state.tableData.push(response.data)
self.setState({tableData: response.data});
})
.catch(function (error) {
self.props.history.push('/login');
console.log(error);
});
}
dateValidator(value, row) {
if(value === ""){
return 'You must select a date!';
}else{
return true;
}
}
onAddRow = (row) => {
// Save to server and on success:
this.state.tableData.push(row)
this.setState({
tableData: this.tableData
});
}
render() {
const { tableData } = this.state;
const selectRowProp = {
mode: 'checkbox'
};
function editButton(cell, row){
if(row.status !== "Complete") {
return (<img alt="logo" className="imageIcon" src={editImage}/>);
}
}
return (
<div className="grid-item-dashboard-title">
Active Payrolls
</div>
<div className="payroll-table">
<BootstrapTable data={ this.state.tableData } remote={ true } insertRow={ true } pagination={ true } deleteRow={ true } selectRow={ selectRowProp } options={ { onAddRow: this.onAddRow } } striped hover rowKey="id">
<TableHeaderColumn dataField='id' autoValue ={true} isKey={ true } hidden hiddenOnInsert>Payroll ID</TableHeaderColumn>
<TableHeaderColumn dataAlign="center" dataField='creation_date' hiddenOnInsert>Creation Date</TableHeaderColumn>
<TableHeaderColumn dataAlign="center" dataField='created_by' hiddenOnInsert>Created By</TableHeaderColumn>
<TableHeaderColumn dataAlign="center" dataField='week_ending' editable={ { type: 'date' ,validator: this.dateValidator} } >Week Ending</TableHeaderColumn>
<TableHeaderColumn dataAlign="center" dataField='status' hiddenOnInsert>Status</TableHeaderColumn>
<TableHeaderColumn dataAlign="center" dataFormat={editButton}></TableHeaderColumn>
</BootstrapTable>
</div>
</div>
);
}
}
export default Payrolls;