我在一个Consumer小部件中有一个ListView小部件。我想要实现的是在添加或删除新元素时更新ListView中的元素。Consumer和ListView的代码如下：

Consumer(
    builder: (context, ref, child) {
    final chats = ref.watch(chatsProvider).reversed.toList();
    return ListView.builder(
            reverse: true,
            controller: _scrollController,
            itemCount: chats.length,
            itemBuilder: (context, index) => ChatItem(
            text: chats[index].message,
            isMe: chats[index].isMe,
            id: chats[index].id
            ),
        );
    },
 )

当我添加新项目时，它运行良好，并被添加到我的ListView中。当我尝试删除一个元素时，ListView不会更新。下面是检查它的代码：

class ChatNotifier extends StateNotifier<List<ChatModel>> {
  ChatNotifier() : super([]);

  void add({required ChatModel chatModel}) {
    state = [...state, chatModel];
  }

  void removeElement({required String id}) {
    state.removeWhere((message) => message.id == id);
  }
}

final chatsProvider = StateNotifierProvider<ChatNotifier, List<ChatModel>>(
  (ref) => ChatNotifier(),
);

我应该在代码中添加什么来从ListView中删除元素？