Реагировать на добавление в таблицу пустой строки при добавлении нового элемента

Question

Когда я добавляю новый элемент в таблицу в React, я обновляю состояние, но таблица не перерисовывается с новыми данными. Я знаю, что данные передаются, потому что новый элемент появляется в состоянии, и добавляется новая строка, но все props.children таблицы пусты.

Вот упрощенная версия родительского компонента.

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>
    )
  }
}

Модал добавления пользователя публикует в API (успешно) и

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

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

  addRow(user)
}

Таким образом, API успешно обновляется, новый пользователь успешно читается, данные добавляются в состояние успешно, а новая строка имеет правильный идентификатор, но дочерние элементы таблицы пустые, поэтому передний конец просто показывает пустую строку.

Компонент таблицы - я использовал как пользовательскую оболочку таблицы для семантического пользовательского интерфейса, так и react-table, и проблема сохраняется в любом случае.

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

Редактировать: Я не отправлял данные в нужном формате.