Latest data from DB after a successful onUpdate not loading in Material-table

Question

I am using material-table with remote data set up to call an API to retrieve data from a DB. The table is also editable with onRowAdd and onRowUpdate. The code is shown below.

The problem I am facing is that when I update a row, I can see the data is updated successfully in the database however, the Table doesn't reflect the newly updated data until I refresh the browser. On closer look of the server log, I could see that material-table refreshes the table BEFORE the actual backend update has finished and hence still receives the old data. I believe this is due to the fact that onRowUpdate returns a promise and while the promise hasn't been fulfilled, the Table already fires a refresh (the query in the remote data of the table).

My questions are:

1. How do I prevent material-table from refreshing the table until the onRowUpdate promise has completed? I would think this is a common question but I have been Googling but could not find an answer.

2. onRowAdd is behaving OK. i.e. the new row is shown in the table. Does this mean somehow material-table behaves differently in this aspect for onRowAdd?

<MaterialTable
            style={{backgroundColor: 'rgb(226, 231, 235)'}}
            icons={tableIcons}
            columns={tableColumns}
            data={query => 
              new Promise((resolve, reject) => {
                axios.get( props.apiURL + "menu-groups", {
                  headers: {"Content-Type": "application/json",
                            "Request-ID": transactionId,
                            "Source-System": SOURCE_SYSTEM,
                            "Authorization": "Bearer " + someToken}
                      }
                  )
                  .then(response => {
                    props.onChange(response.data);

                    resolve({
                      data: response.data,
                      page: null,
                      totalCount: response.data.length
                    });
                  })
                  .catch(error => { 
                      console.error(error);
                      reject(error);
                  })
                  
                  setTransactionId(uuid());
              })
            }
            title="Menu Groups"
            
            editable={{
                onRowAdd: (newData) =>
                  new Promise<void>((resolve, reject) => {
                    setTimeout(() => {
                      axios.post(props.apiURL + "menu-groups", JSON.stringify(newData), {
                          headers: {"Content-Type": "application/json",
                                    "Request-ID": transactionId,
                                    "Source-System": SOURCE_SYSTEM,
                                    "Authorization": "Bearer " + someToken}
                        }
                      )
                      .then(response => {
                        resolve();
                      })
                      .catch(error => { 
                        console.error(error);
                        reject(error);
                      })
                        
                      setTransactionId(uuid());
                    }, 1000);
                }),
                onRowUpdate: (newData, oldData) =>
                  new Promise<void>((resolve, reject) => {
                    setTimeout(() => {
                      axios.put(props.apiURL + "menu-groups" + "/" + newData.id, JSON.stringify(newData), {
                          headers: {"Content-Type": "application/json",
                                    "Request-ID": transactionId,
                                    "Source-System": SOURCE_SYSTEM,
                                    "Authorization": "Bearer " + someToken
                        }
                      )
                      .then(response => {
                        resolve();
                      })
                      .catch(error => { 
                        console.error(error);
                        reject(error);
                      })
                        
                      setTransactionId(uuid());
                    }, 1000);
                }),
                onRowDelete: (oldData) =>
                new Promise<void>((resolve, reject) => {
                    setTimeout(() => {
                      axios.delete(props.apiURL + "menu-groups" + "/" + oldData.id, {
                        headers: {"Content-Type": "application/json",
                                  "Request-ID": transactionId,
                                  "Source-System": SOURCE_SYSTEM,
                                  "Authorization": "Bearer " + someToken}
                      }
                    )
                    .then(response => {
                      resolve();
                    })
                    .catch(error => { 
                      console.error(error);
                      reject(error);
                    })
                      
                    setTransactionId(uuid());
                  }, 1000);
                })
            }}

            />

If I allow some time for the API to retrieve the data from the DB to give the row update call a chance to be completed before actually retrieving the data from the DB, then the Table shows the newly updated data correctly. This further proves the issue I am facing is because of the async nature of the table refresh.

Thank you and Merry Christmas everyone!