How to convert it to react functional component

I have this from react-data-grid I already convert it to functional component but I am stuck at when I change the content of a row the changes will take effects

original

  onGridRowsUpdated = ({ fromRow, toRow, updated }) => {
    this.setState(state => {
    const rows = state.rows.slice();
    for (let i = fromRow; i <= toRow; i++) {
      rows[i] = { ...rows[i], ...updated };
    }
    return { rows };
  });
};

my code

    const columns = [some data];
    let rowsIntial = [some data];
    const[rows,setRows]=useState(rowsinitial);

    const   onGridRowsUpdated = ({ fromRow, toRow, updated }) => {

        const rows = rows.slice();
       console.log(rows);
       for (let i = fromRow; i <= toRow; i++) {
          rows[i] = { ...rows[i], ...updated };
         }

      return rows;
   };

JSX:

                    <ReactDataGrid
                        columns={columns}
                        rows={rows}
                        onGridRowsUpdated={onGridRowsUpdated}
                        enableCellSelect={true}
                    />

how can I change onGridRowsUpdated to make work?

const onGridRowsUpdated = ({ fromRow, toRow, updated }) => {
    setRows((state) => {
        const newRows = state.slice();
        console.log(newRows);
        for (let i = fromRow; i <= toRow; i++) {
            newRows[i] = { ...newRows[i], ...updated };
        }
        return newRows;
    }
};