react-selectable | allows mouse selection of child items | Frontend Utils library

I have a table, and its cells are selectable(Using react-selectable-fast). There are 15000 rows and each row has 30 Selectable cells. I am having a strange issue with re-rendering. It's taking longer to re-render the component.

Here is the code sandbox link for the same: https://codesandbox.io/s/unruffled-vaughan-vnox7

The problem is, when I remove the setState method then it works as expected, as there is no re-rendering. But, since the event on a cell needs to be captured in the parent component to make changes in the other form of the page(not available in the code sandbox), so I need to update the state of the component, then the page is taking longer than usual to show the selected cells.

The glitch can be seen here: https://vnox7.csb.app/

Is there anything I am doing wrong here?

I'm using react-selectable-fast link here.

How to set/get isChecked prop provided by the library.

I have two classes, Group which contains the list of items, GroupItem which is the selectable item which is wrapped in createSelectable that is provided by the library, here's my code:

I am using react-selectable-fast in a drag and drop UI. I would like to programmatically deselect all at the completion of the drop event.

The documentation says it is possible:

Using ref on SelectableGroup gives access to ref.clearSelection() method to unselect all items programmatically.

I've tried adding a ref to SelectableGroup and running ref.clearSelection(), but I get ref.clearSelection is not a function.

This isn't obvious to me and there doesn't appear to be any more documentation about the topic.

Can someone help me with a simple example showing how this works?