React-Table Filtering unexpected behavior : The table header is updated (and the filter itself) instead of updating just the data

I’m using [email protected], [email protected] and [email protected], to create a table with out of the box server side pagination and filtering.
The pagination is working fine but I’m having some difficulties with the filtering. I have two default text filters that filter correctly (they get the correct info from the server), but I’m experiencing strange behaviours:

• On key press, when the filtering is done (when the axios request gets an answer), the table is totally refreshed including the header where the filters are (and not only its results);
• Since it refreshes the whole table, the textbox where the user was typing looses the focus, and forces the user to reselect the filter to introduce the second character.

For the filtering, I’m using the DefaultColumnFilter that React-Table offers:

function DefaultColumnFilter({ column: { filterValue, setFilter, id } }) {
  return (
    <input
      value={filterValue || ""}
      onChange={e => {
        setFilter(e.target.value || undefined)
      }}
      placeholder={`Rechercher ...`}
    />
  )
}

So, my questions are:

• How can I stop the auto filtering after just one char is typed (I’ve tried to use a setTimeout, but couldn’t set it to work correctly…)?
• How to make it stop refreshing the whole table including the header?

I’ve created a sandbox with the relevant code here: https://codesandbox.io/s/mystifying-shape-3tbn7

// Render the UI for your table
if (pageLoading) return <Loading />

// Render the UI for your table
if (loading) return <Loading />