react-data-table-component: [FATAL BUG] Infinite loop caused by selectableRowSelected + onSelectedRowsChange

Describe the bug

I’m experiencing a strange and fatal behavior when using selectableRowSelected in combination with onSelectedRowsChange: The two props works great on their own, but broke everything when used together: (in order to pre-select and then select new rows), i run into an infinite loop (re-render) as soon as the table loads.

Based on my debugging, the fault occurs when i update the independent state which is keeping the rows selected. The strange things, is that the state is never used in the application (neither i have a useEffect hook), but the behavior of the table changes based on how i update the state.;

• If i update the state with the selectedRows provided by onSelectedRowsChange-> Infinte loop (Max update depth excedeed)
• If i update the state with an empty array (via onSelectedRowsChange trigger) -> Infinte loop (Max update depth excedeed);
• If i update the state with any string (via onSelectedRowsChange trigger) -> No errors and the selection work as expected (but i am unable to get the selected rows);
• If i update the state by strinigify the selectedRows provided by onSelectedRowsChange -> No infinite loop, but i am unable to select new rows, the state keep only the stringified selected rows defined by selectableRowSelected;

To Reproduce

Steps to reproduce the behavior:

import DataTable, { TableProps } from 'react-data-table-component';

export default Function Index(){
    const columns = [
          {
              name: 'Name',
              selector: row => row.name,
              sortable: true,
          }
      ];
    
    const data = [
    {"name": "test1" },
    {"name": "test2" },
    {"name": "test3" },
    {"name": "test4" },
    {"name": "test5" },
    {"name": "test6" },
    ]
    
    const [selected, setSelected]=useState(undefined)
    const handleSelectedRows = state => {
    
            // infinite loop 
            setSelected([]) 
            setSelected(state.selectedRows) 
    
            // no infinte loop, and selection works regularly, unable to save the selected rows
            setSelected("noinfiniteloop") 
    
             // strange behavior: no infinte loop, preselected ok but unable to select new rows 
            setSelected(JSON.stringify(state.selectedRows)) 
        }
    
    const anyRowCondition = row => false  
    return(
          <DataTable
                columns={columns}
                data={data}
                selectableRows
                onSelectedRowsChange={handleSelectedRows}
                selectableRowSelected={anyRowCondition}
            /> 
    )
}

columns and data are provided correctly. Everything is typed via typescript but for more clarity i posted the code without types. columns defined using useMemo, handleSelectedRows tried with and without useCallback with no differences.

Expected behavior

I would like to be able to preselect some rows, and then mantain the possibility to select new ones (updating the state according to the selection)

Versions (please complete the following information)

• React 17.0.1 (RDT requires 16.8.0+)
• Browser: Any
• OS : Dockerized Node:16
• RDT : 7.4.5

Thanks in advance for the support and keep on the great work you guys are doing with this awesome package!