Animated List not working properly with data from firebase flutter

Question

I have list view builder which builds with the documents from the firestore, I wanted to animate the changes so I used animated list but during the changes made in the firestore the list is giving error, like when I add new doc to the firestore the list gives range error and for deleting as well

AnimatedList(
                      shrinkWrap: true,
                      physics: const NeverScrollableScrollPhysics(),
                      key: listKey,
                      initialItemCount: snapshot.data?.docs.length ?? 0,
                      itemBuilder: (context, index, animation) {
                        DocumentSnapshot todoList = snapshot.data!.docs[index];
                        bool value =
                            snapshot.data!.docs[index].get(kIsCompleted);

                        String docId =
                            snapshot.data!.docs[index].reference.id.toString();
                        var timestamp =
                            snapshot.data!.docs[index].get(kCreatedAt);
                        var date = timestamp.toDate();
                        var time = DateFormat.jm().format(date);

                        int priorityNumber =
                            snapshot.data!.docs[index].get(kPriority);

                        return TodoTile(
                          borderColour: dataBase.colorMapping[priorityNumber] ??
                              Colors.white70,
                          appBarTitle: 'This task was added today at $time',
                          flagColour: dataBase.colorMapping[priorityNumber] ??
                              Colors.black,
                          dateAdded: '',
                          description: todoList.get(kDescription),
                          docId: docId,
                          onChecked: (context) {
                            dataBase.onCheckboxchecked(docId, value);
                          },
                          taskName: todoList.get(kTaskName),
                          isCompleted: todoList.get(kIsCompleted),
                          onChanged: () async {
                            dataBase.onCheckboxchecked(docId, value);
                          },
                          onRemove: (context) {
                            // dataBase.onRemove(docId);
                            listKey.currentState!.removeItem(
                              index,
                              (context, animation) => dataBase.onRemove(docId);
                              duration: const Duration(milliseconds: 300),
                            );
                          },
                          onDismissed: () {
                            dataBase.onRemove(docId);
                          },
                          onCheck: () {
                            dataBase.onCheckboxchecked(docId, value);
                          },
                        );
                      }); This is my code, the same code with the listviewbuilder instead of an animated list worked fine. I don't know how to solve this.