Не срабатывает событие "child_added" в firebase

Всем привет. Начал делать приложение TODO list на react и сталкнулся с такой проблемой. После отправки noteы на сервер не срабатывает событие "child_added" в методе componentWillUnmount(). Хотя данные на сервер приходят, я проверял. Первый раз работаю с firebase и после долгих попыток решить проблему я уже отчаялся.

class App extends Component {
  constructor(props) {
    super(props);

    this.app = !firebase.apps.length
      ? firebase.initializeApp(DB_Config)
      : firebase.app();
    this.db = this.app.database().ref().child('notes');

    this.state = {
      notes: [],
    };

    this.addNote = this.addNote.bind(this);
  }

  componentWillUnmount() {
    const previousNotes = this.state.notes;

    this.db.on('child_added', (snap) => {
      console.log(snap.val());
      previousNotes.push({
        id: snap.key,
        noteContent: snap.val().noteContent,
      });
      this.setState({
        notes: previousNotes,
      });
    });
  }

  addNote(note) {
    this.db.push().set({
      noteContent: note,
    });
  }

  render() {
    return (
      <div className="notesWrapper">
        <div className="notesHeader">
          <div className="heading">React Todo List</div>
          <div className="notesBody">
            {this.state.notes.map((note) => {
              return (
                <Note
                  noteContent={note.noteContent}
                  noteId={note.noteId}
                  key={note.noteId}
                />
              );
            })}
          </div>
          <div className="notesFoter">
            <NoteForm addNote={this.addNote} />
          </div>
        </div>
      </div>
    );
  }
}