React material table losing its sorted state when i click a button in custom column rendering (any state update will cause this issue)

Question

Here is my code. I have Collapsible list on click of an Icon Button. When i sort the table before hand, then click the button to expand the list, the table goes to unsorted state(previous order). I dont know why.

<MaterialTable
            columns={[
              { title: "Jenkins Master", field: "organization" },
              { title: "Status", field: "status" },
              {
                field:'admins',
                title:'admins',
                render:rowData=><>
                <ListItem style={{paddingBottom:0}}>
                  <ListItemText style={{fontSize:"small",paddingBottom:0}}>{rowData.admins[0]}</ListItemText>
                  {this.getState(rowData.organization) ? <IconButton style={{padding:5}} onClick={()=>this.handleAdminExpand(rowData.organization)}><ExpandLess /></IconButton> : <><Chip label={"+"+(rowData.admins.length-1)}/><IconButton style={{padding:5}} onClick={()=>this.handleAdminExpand(rowData.organization)}><ExpandMore /></IconButton></>}
                  </ListItem>
                  <Collapse in={this.getState(rowData.organization)} timeout="auto" unmountOnExit><List style={{paddingLeft:10,paddingBottom:0,paddingTop:0}}>{rowData.admins.slice(1,rowData.admins.length).map((item)=>
                  <ListItem key={item} style={{padding:4}}>{item}</ListItem>)}
                  </List></Collapse></>
              },
              { title: "Used storage", field: "usedStorage" }
            ]}

and here is my handler method.

    handleAdminExpand(name){
  this.state.openRows.find(openRow => openRow ===name ) ? 
  this.setState({
    openRows: this.state.openRows.filter(openRow => openRow!==name)
  })
   :
  this.setState({
    openRows: this.state.openRows.concat([name])
  })
};

Any comments on this are greatly appreciated.

Answer 1

The issue here was with the material table. If I update any kind of state, the table's sorted state is lost. So I moved admin column code and state to separate component. This solved the issue. This is only a workaround. The issue still persists in react material-table