Дублирующиеся задачи отображаются, даже если в Firebase добавляется только один документ

Question

Для создания диспетчера задач я использую response-redux-firebase. Когда задача создается, пользователь заполняет форму, и эти данные используются для добавления документа в мою коллекцию задач в firebase. Таким образом, у нас есть документ для каждой задачи. Затем другой компонент отображает каждый документ в коллекции задач на карту, чтобы пользователь мог видеть каждую задачу

Проблема возникает, когда мы создаем задачу, она отображает дубликат задачи в нашем разделе дел. Однако только один новый документ добавлен в нашу коллекцию задач в Firebase. Также, когда я обновляю страницу, дублирующая задача исчезает. Я полностью сбит с толку относительно того, почему дублирующаяся задача отображается, даже если в firebase создается только один новый документ. С чего начать дубликат? Любая помощь будет высоко ценится!

Надеюсь, эти два изображения помогут вам немного лучше понять проблему, так как мне было сложно ее объяснить.

Пример дубликата:

когда я обновляю страницу, дубликат исчезает:

Это функция, которая отправляет форму в базу данных:

handleCreateSubmit = e => {
e.preventDefault();
const { firestore } = this.props;
this.props.users.forEach(user => {
  if (user.uid === this.props.auth.uid) {
    const dueDate = new Date(this.state.due + " " + this.state.eta);
    const newTask = {
      title: this.state.title,
      description: this.state.description,
      due: dueDate,
      createdBy: user.name,
      status: "todo",
      department: this.state.departmentName
    };

    firestore
      .add({ collection: "todo" }, newTask)
      .then(() => console.log("task added"))
      .catch(() => {
        console.log("error");
      });
    this.setState({
      title: "",
      description: "",
      due: "",
      eta: ""
    });
    this.addCreateNotification(user.name);
   } else if (!user.uid === this.props.auth.uid) {
    return null;
  }
  });
  this.handleCreateClose();
 };

И эта функция отображает каждый документ на карту:

ren = () => {
if (this.props.todo) {
  return (
    <React.Fragment>
      {this.props.todo.map((item, i) => {
        if (item.department === this.props.match.params.id) {
          return (
            <div key={i}>
              <div className="card" style={{ backgroundColor: "#d71636" 
  }}>
                <div className="card-content white-text">
                  <span className="card-title">
                    {item.title}{" "}
                    <Start
                      id={item.id}
                      className="start"
                      style={{ float: "right" }}
                      onClick={e => {
                        this.handleClickOpen(e);
                      }}
                    />
                    <Delete
                      id={item.id}
                      className="start"
                      style={{ float: "right" }}
                      onClick={e => {
                        this.delete(e);
                      }}
                    />
                  </span>
                  <p>
                    <b>Created By: </b>
                    {item.createdBy}
                  </p>
                  <p>
                    <b>Due:</b> {moment(item.due.toDate()).calendar()}
                  </p>
                  <p>
                    <b>Description: </b>
                    {item.description}
                  </p>
                </div>
              </div>
            </div>
          );
        }
      })}
    </React.Fragment>
  );
} else {
  return <Loading />;
}
};