React\Firebase. Не удаляется последний todo элемент из БД Firebase

Всем привет!) Написал небольшое React Note App с простым функционалом: добавить/удалить задачу. В качестве backend'а используется Firebase Realtime Database. Приложение добавляет и удаляет задачу, НО при удалении последнего todo, она удаляется из db, но не из верстки. Нужно обновить страницу и только тогда она исчезает. Подскажите, пожалуйста, что я делаю не так?

Axios service:

import axios from 'axios'

export class NoteService {
    static async getAllNotes() {
        const response = await axios.get('https://react-note-app-08-default-rtdb.firebaseio.com/notes.json')
        const notes = Object.keys(response.data).map(key => {
            return {
                ...response.data[key],
                id: key
            }
        })
        return notes
    }

    static addNewNote(newNote) {
        return axios.post('https://react-note-app-08-default-rtdb.firebaseio.com/notes.json', newNote)
    }

    static deleteNote (noteId) {
        return axios.delete(`https://react-note-app-08-default-rtdb.firebaseio.com/notes/${noteId}.json`)
    }
}

Из списка задач прокидываю в props конкретной todo функцию удаления deleteNote:

import React, {useEffect, useState} from 'react';
import Form from "../components/Form";
import Notes from "../components/Notes";
import {NoteService} from "../Services/NoteService";

const Home = () => {

    const [notes, setNotes] = useState([])

    useEffect(() => {
        fetchNotes()
    }, [])

    async function fetchNotes() {
        const notes = await NoteService.getAllNotes()
        setNotes(notes)
    }

    const deleteNote = async (noteId) => {
        NoteService.deleteNote(noteId)
        const notes = await NoteService.getAllNotes()
        setNotes(notes)
    }

    const addNote = async () => {
        const notes = await NoteService.getAllNotes()
        setNotes(notes)
    }

    return (
        <React.Fragment>
            <Form addNote={addNote}/>
            <hr/>
            {notes.length !== 0
                ? <Notes notes={notes} deleteNote={deleteNote} />
                : <div>Загрузка</div>
            }
        </React.Fragment>
    );
};

export default Home;

Код самой записки:

import React from 'react';

const Notes = ({notes, deleteNote}) => {

    return (
        <ul className='list-group'>
            {notes.map(note =>
                <li
                    className='list-group-item d-flex justify-content-between'
                >{note.inputValue}
                    <button onClick={() => {deleteNote(note.id)}} className='btn btn-outline-dark btn-sm'>
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                             className="bi bi-trash" viewBox="0 0 16 16">
                            <path
                                d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"/>
                            <path fill-rule="evenodd"
                                  d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"/>
                        </svg>
                    </button>
                </li>
            )}
        </ul>
    );
};

export default Notes;

На всякий прикрепляю ссылку на github, для запуска - npm i, npm start