jqxGrid in React and changing value of state hook clears the Grid filters

[yavor-htmlelements]

Steps for reproducing:

1. Filter a column by selecting one or two values from the list box of the filter panel

Code for reproducing the issue:

import * as React from 'react';
import { useState  } from 'react';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxGrid, { jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';

const App: React.FC<{}> = () => {

    const myGrid = React.createRef<JqxGrid>();
      // eslint-disable-next-line 
    const [recordNum, setRecordNum] = useState(0);
    let  rec = 0;
    const filterCallback = function () {
        if ( myGrid!.current !== null) {
            console.log(myGrid!.current.getrows().length);
            console.log(myGrid!.current.getdisplayrows().length);
              // eslint-disable-next-line 
            const rowsCount = myGrid!.current.getrows().length;
           
            stateChangedOfRecords(rowsCount)
            }
    }
   const  stateChangedOfRecords = (count:any) =>{
        setTimeout(() => {
            setRecordNum( count );
        }, 1000);
   }
    const onReady= function () {
        if ( myGrid!.current !== null) { 
                const grid = document.getElementById('grid');

                grid?.addEventListener('filter', () => {
                    if ( myGrid!.current !== null) {
                        const rowsCount = myGrid!.current.getrows();
                
                        setRecordNum( rowsCount.length );

                    }
                });


            }
        }
   

    const source: any =
            {
            datafields: [
                { name: 'CompanyName', type: 'string', map: '0' },
                { name: 'ContactName', type: 'string', map: '1' },
                { name: 'Title', type: 'string', map: '2' },
                { name: 'Address', type: 'string', map: '3' },
                { name: 'City', type: 'string', map: '4' },
                { name: 'Country', type: 'string', map: '5' }
            ],
            datatype: 'array',
            localdata: [
                    ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
                    ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
                    ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico'],
                    ['Around the Horn', 'Thomas Hardy', 'Sales Representative', '120 Hanover Sq.', 'London', 'UK'],
                    ['Berglunds snabbkp', 'Christina Berglund', 'Order Administrator', 'Berguvsvgen 8', 'Lule', 'Sweden'],
                    ['Blauer See Delikatessen', 'Hanna Moos', 'Sales Representative', 'Forsterstr. 57', 'Mannheim', 'Germany'],
                    ['Blondesddsl pre et fils', 'Frdrique Citeaux', 'Marketing Manager', '24, place Klber', 'Strasbourg', 'France'],
                    // eslint-disable-next-line 
                    ['Blido Comidas preparadas', 'Martn Sommer', 'Owner', 'C\/ Araquil, 67', 'Madrid', 'Spain'],
                    ['Bon app', 'Laurence Lebihan', 'Owner', '12, rue des Bouchers', 'Marseille', 'France'],
                    ['Bottom-Dollar Markets', 'Elizabeth Lincoln', 'Accounting Manager', '23 Tsawassen Blvd.', 'Tsawassen', 'Canada'],
                    ['Bs Beverages', 'Victoria Ashworth', 'Sales Representative', 'Fauntleroy Circus', 'London', 'UK'], ['Cactus Comidas para llelet', 'Patricio Simpson', 'Sales Agent', 'Cerrito 333', 'Buenos Aires', 'Argentina'], ['Centro comercial Moctezuma', 'Francisco Chang', 'Marketing Manager', 'Sierras de Granada 9993', 'Mxico D.F.', 'Mexico'], ['Chop-suey Chinese', 'Yang Wang', 'Owner', 'Hauptstr. 29', 'Bern', 'Switzerland'], ['Comrcio Mineiro', 'Pedro Afonso', 'Sales Associate', 'Av. dos Lusadas, 23', 'Sao Paulo', 'Brazil'], ['Consolidated Holdings', 'Elizabeth Brown', 'Sales Representative', 'Berkeley Gardens 12 Brewery', 'London', 'UK'], ['Drachenblut Delikatessen', 'Sven Ottlieb', 'Order Administrator', 'Walserweg 21', 'Aachen', 'Germany'], ['Du monde entier', 'Janine Labrune', 'Owner', '67, rue des Cinquante Otages', 'Nantes', 'France'], ['Eastern Connection', 'Ann Devon', 'Sales Agent', '35 King George', 'London', 'UK'], ['Ernst Handel', 'Roland Mendel', 'Sales Manager', 'Kirchgasse 6', 'Graz', 'Austria']
            ],

    };

    const columns =
    [
    { text: 'Company Name', datafield: 'CompanyName', width: 200 },
    { text: 'Contact Name', datafield: 'ContactName', width: 150 },
    { text: 'Contact Title', datafield: 'Title', width: 100 },
    { text: 'Address', datafield: 'Address', width: 100 },
    { text: 'City', datafield: 'City', width: 100 },
    { text: 'Country', datafield: 'Country' }];

    let dataAdapter = new jqx.dataAdapter(source);

    return (
                <div>
                <JqxGrid
                        ref={myGrid}
                        theme={'bootstrap'}
                        width={'100%'}
                        source={dataAdapter}
                        columns={columns as any}
                        filterable={true}
                        showfilterrow={false}
                        filtermode={'excel'}
                        enabletooltips={true}
                        sortable={true}
                        onFilter={filterCallback}
                        ready={onReady}
                ></JqxGrid>
                <div>Records: {recordNum}</div>
                <div>Records2: {rec}</div>
               
                </div>
              
            );
}


export default App;