React table appending empty row when new item is added to state

When I add a new item to a table in React, I update the state, but the table does not re-render with the new data. I know the data is being passed through, because the new item appears in the state, and a new row is appended, but all the props.children of the table are empty.

Here is a simplified version of the parent component.

class Page extends Component {
  initialState = {
    users: [],
  }

  state = this.initialState

  async componentDidMount() {
    const users = await getDataFromApi()

    this.setState({ users })
  }

  addRow = user => {
    this.setState({ users: [...this.state.users, user] })
  }

  render() {
    return (
      <div>
        <AddModal addRow={this.addRow} />
        <Table data={this.state.users} />
      </div>
    )
  }
}

The add user modal is posting to the API (successful) and

handleSubmit = async event => {
  event.preventDefault()

  const response = await postDataToApi()
  const user = await getNewUser(response)

  addRow(user)
}

So the API gets updated successfully, the new user is read successfully, the data is getting added to state successfully, and the new row that is added has the correct ID, but the prop children of the table are empty, so the front end just shows an empty row.

Table component - I've used both a custom table wrapper over semantic UI and react-table, and the issue persists either way.

class Table extends Component {
  render() {
    const { data } = this.props

    return (
      <DataTable
        data={data}
        meta={column keys and values}
      />
    )
  }
}

class DataTable extends PureComponent {
  state = {}

  componentWillReceiveProps(nextProps) {
    this.setState({ data: nextProps.data, meta: nextProps.meta })
  }
  ...etc

Edit: I was not sending the data through in the right format.