How to get the props after Unselect the last item

[Brhernann]

Hello there,

Am working with this one and when i unselect the last item, the onSelect function is returning me a empty array...
Great! is not item but how to know which one was unselected ?

i tried to send the props with the data that i need from Cell to the component where im calling the selectable, i tried Onclick but am having problem with React because when i open the modal is rendering all the data, i created a condition in the Cell to work only when is unselected but is not working

is rendering all the data anyway:

The error:

Bug: too hard to fix "Cannot update a component from inside the function body of a different component.

Here the code, u can follow the OnClick....

//This one is the function that is receiving the data to know which one was the las unselected
const onDeselect = useCallback(room => {
         setRoom(room)
},[])

//Calling the  selectable component that is inside `Cards` that is inside `Tabs`!
                            <Tabs activeKey={activeKey} onChange={tabCallback}>
                                {currentTab && currentTab.distribution.map((q, i) => (
                                    <TabPane className="tabPanelFloor" key={i} tab={`PISO ${q.floor}`}>

                                        {q.rooms.map((room, index) => (
                                            <Card
                                                style={gridStyle}
                                                key={index}
                                                title={`Habitación ${room.number}`}
                                            >
                                                <div> 
//Calling the selectable
                                                    <Selectable floor={q.floor} beds={room.beds} room={room.number} onClick={onDeselect} onSelect={onSelect}/>
                                                </div>
                                            </Card>
                                        ))}
                                    </TabPane>
                                ))}
                            </Tabs>

//The selectable!
const Selectable = ({ onSelect, floor, beds, room, onClick }) => {
           return (
    <SelectableGroup
      scrollContainer="html"
      allowClickWithoutSelected={true}
      selectOnClick={true}


      resetOnStart={false}
      enableDeselect
      onSelectionFinish={onSelect}
    >

      <table key={room} border="1">
        <tbody>
          <List data={{ floor, beds: _.chunk(beds, 6), room }} onClick={onClick} />
        </tbody>
      </table>

    </SelectableGroup>
      );
    };

//The list!
const List = memo(({ data, onClick }) =>
  data.beds.map((q, i) =>
  (
    <tr key={i}>
      {q.map((k, j) => <Cells key={j} room={data.room} onClick={onClick} number={k} />)}
    </tr>
  )
 )
);

//The cell that contain the data and know if is selected or UNSELECTED!
const Cells = ({ selectableRef, isSelected, isSelecting, number, room, onClick}) => {
    return (
        <td
            ref={selectableRef}
            className={`${isSelected ? "selected" : ""} ${isSelecting ? "selecting" : ""}`}
            
        >
            <div style={
                {
                    color: isSelected || isSelecting ? "#eeeded" : "#000",
                    background: isSelected || isSelecting ? "#5c6e91" : "#fff",
                    padding: 2
                }
            }
          onClick={(!isSelected || !isSelecting) && (onClick(room))}
            >  
               
                <div><Icon component={BedSvg}/></div>
                <div>{number}</div>
            
            </div>
        </td>
    );
};

The onClick in Cell will work only if is Unselected, because is the data that i need and because is rendering to much!

is a way to know which one was unselected and how to improve it ?

Thanks guys !