Firestore offline persistence removes data from cache after updating a document (with react)

Question

Context

I have a webapp using Firestore and React where I fetch data that has this structure:

worksTodo:
  title
  status
  createdAt

I have a page where I fetch a list of data from firestore, and I query these data with the orderBy() and limit() methods:

todosRef.orderBy('status', 'desc')
        .orderBy('createdAt', 'desc')
        .limit(n)
        .onSnapshot((querySnapshot) => {
            // getting data and setState here...
        });

I also use react-router v4 with history to redirect pages after event.

I have made a codepen to reproduce the bug here. (the code above are line 82 to 108)

Issue

After updating few documents status field, all data that is superior than my limit query (n = 5) gets deleted from cache one by one, which is not expected.

I update the document with this code (line 189 to 195):

todosRef.doc(match.params.id).update({
            title,
            status,
        }).then(() => {
            console.log('document updated');
            history.push('/');
        }).catch((err) => console.error(err));

Reproduction steps

To reproduce the bug, please follow these steps on the codepen page:

1. Click on Todo List on the header
2. Click on "reset data" to ensure that all status are set to 'in progress'
3. Click on the first task
4. Modify the status of this task from 'in progress' to 'done' with the select input field
5. Submit
6. Repeat steps 2, 3 and 4 until the bug trigger
7. The tasks from the list disappears one by one until 4 tasks remain.
8. You need to delete the firestore indexedDB from the Application tab of chrome dev tools, and then refresh to get back all data

What I've tried

When I disable offline persistence, the bug totally disappears. So I am sure that it is related to offline persistence.

I contacted the support team of firebase first, but as I use a 3rd-party framework (react), they could not help me, and recommended me to ask for help here.

I also consulted this stackoverflow question : Firestore - Using cache until online content updates But the answer mentions:

"After you get the cached result, Firestore will check with the server to see if there are any changes to your query result. If yes you will get another snapshot with the changes."

However it seems that firestore find that data from server are not different than data from cache in this case.

Question

How can I ensure that the data from cache are exactly the same as the data from the server ?

Edit

I've just found that there is already a very similar case question on SO:

Error when limiting items with Firestore

In this case, the bug happens with angular, which consolidate the idea that the issue comes from the firebase SDK.