selectableRowSelected and onSelectedRowsChange are conflict in react-data-table-component

Question

I'm using 'react-data-table-components' and having simple code like that:

import React, { useState } from "react";
import DataTable from "react-data-table-component";

const SampleDataTable = () => {

  const data = [
    { id: 1, name: "John Doe", age: 28, profession: "Engineer" },
    { id: 2, name: "Jane Smith", age: 32, profession: "Designer" },
    { id: 3, name: "Bob Johnson", age: 45, profession: "Manager" }
  ];


  const columns = [
    { name: "ID", selector: "id", sortable: true },
    { name: "Name", selector: "name", sortable: true },
    { name: "Age", selector: "age", sortable: true },
    { name: "Profession", selector: "profession", sortable: true }
  ];

  const [seletectRows, setSelectedRows] = useState();

  const handleSelectedRowsChange = (rows) => {
    setSelectedRows(rows.setSelectedRows);
  };

  const defaultSelectedRows = (row) => row.id > 2;

  console.log(seletectRows);

  return (
    <div>
      <h2>Sample Data Table</h2>
      <DataTable
        columns={columns}
        data={data}
        selectableRows={true}
        selectableRowsHighlight
        pagination 
        highlightOnHover 
        striped 
        dense 
        // onSelectedRowsChange={handleSelectedRowsChange}
        selectableRowSelected={defaultSelectedRows}
      />
    </div>
  );
};

export default SampleDataTable;

When I uncomment onSelectedRowsChange={handleSelectedRowsChange} it re-render forever. I don't why but it seems onSelectedRowsChange and selectableRowSelected are conflict. Pls help me if you can.

link codesanbox if you want to try: https://codesandbox.io/s/long-microservice-v84s8j?file=/src/App.js:0-1426