react-redux-firebase doesn't remove the document ID from the store, even tho the document was removed

[enkeyz]

Do you want to request a feature or report a bug?

Bug.

What is the current behavior?

Using Object.entries(orders) to loop through the documents, even tho the document deleted, it will return document ID as key, but the value will be null. Redux dev tools clearly shows that the document ID is still there.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via codesandbox or similar.

import React, { useState } from "react";
import { useSelector } from "react-redux";
import { useFirestoreConnect } from "react-redux-firebase";
import { Tabs, Tab } from "@material-ui/core";

import OrderItem from "./OrderItem";
import OrderFilterPanel from "./OrderFilterPanel";

const OrderList = () => {
  const { uid } = useSelector((state) => state.firebase.auth);
  useFirestoreConnect({
    collection: `users/${uid}/orders`,
    storeAs: "orders",
  });
  const orders = useSelector((state) => state.firestore.data.orders);
  const [value, setValue] = useState(0);

  const handleChange = (event, newValue) => {
    setValue(newValue);
  };

  return (
    <>
      <Tabs
        value={value}
        onChange={handleChange}
        indicatorColor="primary"
        textColor="primary"
        variant="fullWidth"
        aria-label="full width tabs example"
      >
        <Tab label="Pending" />
        <Tab label="Completed" />
        <Tab label="All" />
      </Tabs>
      <OrderFilterPanel value={value} index={0}>
        {orders &&
          // Even tho the document deleted, Object.entries will return document ID as key, but the value will be null.
          Object.entries(orders).map(([docId, order]) => {
            if (order.completed !== false) return null;
            return <OrderItem key={order.orderId} docId={docId} order={order} />;
          })}
      </OrderFilterPanel>
      <OrderFilterPanel value={value} index={1}>
        {orders &&
          Object.entries(orders).map(([docId, order]) => {
            if (order.completed === false) return null;
            return <OrderItem key={order.orderId} docId={docId} order={order} />;
          })}
      </OrderFilterPanel>

      <OrderFilterPanel value={value} index={2}>
        {orders &&
          Object.entries(orders).map(([docId, order]) => {
            return <OrderItem key={order.orderId} docId={docId} order={order} />;
          })}
      </OrderFilterPanel>
    </>
  );
};

export default OrderList;

How I delete the document:

import React from "react";
import { useSelector } from "react-redux";
import { useFirestore } from "react-redux-firebase";

import IconButton from "@material-ui/core/IconButton";
import DeleteIcon from "@material-ui/icons/Delete";

const DeleteOrderButton = ({ docKey }) => {
  const firestore = useFirestore();
  const { uid } = useSelector((state) => state.firebase.auth);

  const removeOrder = () => {
    firestore
      .collection("users")
      .doc(uid)
      .collection("orders")
      .doc(docKey)
      .delete();
  };

  return (
    <IconButton color="primary" aria-label="delete" onClick={removeOrder}>
      <DeleteIcon />
    </IconButton>
  );
};

export default DeleteOrderButton;

Document ID still there:

What is the expected behavior?

Completly removing the document - document ID and the document itself.

Which versions of dependencies, and which browser and OS are affected by this issue? Did this work in previous versions or setups?

Latest version.