React setState()

Недавно начал практиковать React, однако столкнулся с проблемой удаления записей из списка.

Быть точнее: есть список пользователей, что рендерится на сайте; у каждого блока из этого списка есть опция удаления:

Промис удаления:

const delUserPromise = (id) =>
  new Promise((resolve) => {
    resolve(this.state.users.filter((e) => e.id !== id));
  });

Функция вызова промиса удаления:

delUser = (id) => {
  this.delUserPromise(id).then((arr) => {
    this.setState({ users: arr }, () => {
      console.log(this.state.users);
    });
  });
};

Однако данная опция удаления не работает: возвращается правильный массив пользователей, который должен отобразится на сайте и меняется state, но ничего на сайте не происходит. (На функциях, использующих state, выполнен bind в constructor'e)

Пытался искать что-то связанное с этой темой, но там была проблема в неправильном массиве и т.п., но ответа на свой вопрос так и не нашел. Прошу помощи.

Изначальный вид списка пользователей до удаления

Массив пользователей после нажатия удаления (console)

Вид списка после удаления

Users class render func:

render = () => {
  if (this.users.length > 0) {
    return (
      <div>
        {" "}
        {this.users.map((el) => (
          <User delUser={this.props.onDel} key={el.id} user={el} />
        ))}{" "}
      </div>
    );
  } else
    return (
      <div className="user">
        {" "}
        <h3>Пользователей нет</h3>{" "}
      </div>
    );
};

User class render func:

render = () => (
  <div className="user">
    {" "}
    <AiFillCloseCircle
      id="close-icon"
      onClick={() => this.props.delUser(this.user.id)}
    />{" "}
    <MdModeEditOutline id="edit-icon" />{" "}
    <h3>
      {this.user.name} ({this.user.age})
    </h3>{" "}
    <p>Working as a {this.user.job}</p>{" "}
  </div>
);