Sorting and filter is not working using react data grid

[Randhir01]

i'm facing the issue when integrate the sorting and filter using react data grid and react version 18..Below code is use. Any suggestion what's wrong in the code.

import React, { createContext, createElement, useContext, useMemo, useEffect, useLayoutEffect as useLayoutEffect$1, useRef, useState, useCallback, memo, useId, forwardRef, useImperativeHandle } from 'react';
import { flushSync } from 'react-dom';
import clsx from 'clsx';
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
import ReactDataGrid from "react-data-grid";
import 'react-data-grid/lib/styles.css';

class EmptyToolbar extends React.Component {
componentDidMount() {
this.props.onToggleFilter()
}

render() {
    return (<div></div>)
}

}

class Title extends React.Component {
constructor(props) {
super(props);
this.state = {
rows: [
{ id: 1, name: 'John', age: 25 },
{ id: 2, name: 'Jane', age: 30 },
{ id: 3, name: 'Doe', age: 40 },
],
columns: [
{
key: 'id',
name: 'ID',
width: 100,
sortable: true,
filterRenderer: () => ,
},
{
key: 'name',
name: 'Name',
width: 200,
sortable: true,
filterRenderer: () => ,
},
{
key: 'age',
name: 'Age',
width: 100,
sortable: true,
filterRenderer: () => ,
},
],
sortColumn: null,
sortDirection: 'NONE',
filters: {},
};
}

    handleSort = (columnKey, direction) => {
        this.setState({ sortColumn: columnKey, sortDirection: direction });
    };

    handleFilterChange = (columnKey, value) => {
        this.setState((prevState) => ({
            filters: { ...prevState.filters, [columnKey]: value },
        }));
    };
    rowGetter = rowIdx => {
        const rows = this.state.rows;
        return rows[rowIdx];
    };
render() {
    //return 
    const { rows, sortColumn, sortDirection, filters } = this.state;

    const FilterInput = ({ columnKey }) => (
        <input
            type="text"
            onChange={(e) => this.handleFilterChange(columnKey, e.target.value)}
            placeholder={`Filter ${columnKey}`}
        />
    );

    const filteredRows = rows.filter((row) =>
        Object.entries(filters).every(([key, value]) =>
            row[key].toString().toLowerCase().includes(value.toLowerCase())
        )
    );
    return (
        <div>
           
            <ReactDataGrid
                enableCellSelect={true}
                columns={this.state.columns}
                
                onGridSort={this.handleSort}
                
                rowsCount={this.state.rows.length}
                toolbar={<EmptyToolbar />} //here's the EmptyToolbar component placed
                onAddFilter={this.handleFilterChange}
                 />
        </div>
    );

}

}

export default Title;

[truk]

You might be using a really old version. ReactDataGrid isn't an exported component at this point and onGridSort isn't a current prop. Try using a current version and use and you'll get a lot of sorting out of the box