DataGrid - Grid content flickers when rowRenderingMode is set to 'virtual' under certain conditions

Problem

I am having a performance issue with data grid. What I've done is shown as following code, 1. load data from server with group, sort, filter conditions, 2. when the Grid component is mounted, set a time interval to simulate real time update on the loaded data. Generally, it works fine, only the performance issue happens when I scroll to the end of the data grid, there is a dithering effect at bottom of the last line.

Steps to Reproduce:

Just copy following code as a component.

Code
import React from 'react';
import DataGrid, {
  Scrolling, LoadPanel,
} from 'devextreme-react/data-grid';
import DataSource from 'devextreme/data/data_source';
import CustomStore from 'devextreme/data/custom_store';
function handleErrors(response) {
  if (!response.ok) {
    throw Error(response.statusText);
  }
  return response;
}
const isNotEmpty = (value) => value !== undefined && value !== null && value !== '';
const customStore = new CustomStore({
  key: 'OrderNumber',
  load(loadOptions) {
    let params = '?';
    [
      'skip',
      'take',
      'requireTotalCount',
      'requireGroupCount',
      'sort',
      'filter',
      'totalSummary',
      'group',
      'groupSummary',
    ].forEach((i) => {
      if (i in loadOptions && isNotEmpty(loadOptions[i])) { params += `${i}=${JSON.stringify(loadOptions[i])}&`; }
    });
    params = params.slice(0, -1);
    const url = `https://js.devexpress.com/Demos/WidgetsGalleryDataService/api/orders${params}`;
    return fetch(url)
      .then(handleErrors)
      .then((response) => response.json())
      .then((data) => {
        const returnData = {
          data: data.data,
          totalCount: data.totalCount,
          summary: data.summary,
          groupCount: data.groupCount,
        };
        return returnData;
      })
      .catch(() => { throw 'Data Loading Error'; });
  },
});
const dataSource = new DataSource({
  store: customStore,
  group: {
    selector: 'StoreState', desc: false,
  },
  sort: { selector: 'StoreCity', desc: false },
  filter: ['Employee', 'contains', 'Clark'],
  reshapeOnPush: false,
  repaintChangesOnly: true,
});
export function updateProductItem(orderNumber) {
  const newSaleAmount = Math.round(Math.random() * 500);
  customStore.push([{
    type: 'update',
    key: orderNumber,
    data: {
      SaleAmount: newSaleAmount,
    },
  }]);
}
export function updateProducts(orderNumberArray) {
  orderNumberArray.forEach((orderNumber) => { updateProductItem(orderNumber); });
}
class Grid extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loadPanelEnabled: true,
    };
    this.onContentReady = this.onContentReady.bind(this);
  }
  componentDidMount(){
  setInterval(() => {
      updateProducts([63977, 200084, 76927]);
    }, 500);
  }
  onContentReady() {
    this.setState({
      loadPanelEnabled: false,
    });
  }
  render() {
    const {
      loadPanelEnabled,
    } = this.state;
    return (
      <DataGrid
        dataSource={dataSource}
        columnAutoWidth
        onContentReady={this.onContentReady}
        height="90vh"
        showColumnLines
        showRowLines
        showBorders
        remoteOperations
      >
        <Scrolling mode="virtual" rowRenderingMode="virtual" />
        <LoadPanel enabled={loadPanelEnabled} />
      </DataGrid>
    );
  }
}
export default Grid;

Results You Received:

There will be a dithering effect when the page is scrolled to the end.

Results You Expected:

No dithering effect.

Environment Details:

<!–
Specify a DevExtreme version, a browser or device, an operating system and their versions, other environment details or notes you consider important.
–>