Why is shouldComponentUpdate not firing despite my props changing? - reactjs

Question

I'm trying to figure out why the shouldComponentUpdate method doesn't fire.
Here are what my props looks like:
Object
children: [Object, Object, Object, Object, Object] (5)
data: Array (2)
0 {id: 1, activated: true}
1 {id: 2, activated: true}
key: undefined
rowRender: function()
I have the following snippet.
export function withState(WrappedGrid) {
return class StatefulGrid extends React.Component {
constructor(props) {
super(props);
setInterval(() => console.log(this.props), 5000)
}
shouldComponentUpdate(){
console.log("props updated")
return true
}
componentDidUpdate(prevProps, prevState) {
console.log("update")
}
render() { ... }
}
}
Creating StatefulGrid component :
const StatefulGrid = withState(Grid);
class NFTTable extends React.Component {
constructor({rules}){
super()
this.rules = rules
this.renderers = new Renderers()
this.contextMenu = false
}
render(){
return([
<StatefulGrid
key={"table"}
data={this.rules}
rowRender={this.renderers.rowRender}
>
// GridColumn ...
</StatefulGrid>,
<ContextMenu
key={"context_menu"}
caller={this.renderers.caller}
/>
])
}
}
Updating the data :
export default class ContextMenu extends React.Component{
constructor({caller}){
super()
this.state = {
show: false
}
caller(this)
}
handleContextMenu = (e, dataItem) => {
e.preventDefault()
this.dataItem = dataItem
this.offSet = { left: e.clientX, top: e.clientY }
this.activated = dataItem.dataItem.activated
this.setState({ show: true })
}
componentDidMount() {
document.addEventListener('click', () => {
if(this.state.show)
this.setState({ show: false })
})
}
handleSelect = (e) => {
switch(e.item.data){
case "activation":
this.toggleActivation()
break
default:
console.log("Error, non registered event " + e.data)
}
}
toggleActivation(){
this.dataItem.dataItem.activated = !this.dataItem.dataItem.activated;
}
render() {
return (
<Popup show={this.state.show} offset={this.offSet}>
<Menu vertical={true} style={{ display: 'inline-block' }} onSelect={this.handleSelect}>
<MenuItem data="delete" text="Delete rule"/>
<MenuItem data="activation" text={this.activated ? "Deactivate Rule" : "Activate rule"}/>
</Menu>
</Popup>
);
}
}
Calling handleContextMenu :
export default class Renderers {
rowRender = (trElement, dataItem) => {
let greyed = { backgroundColor: "rgb(235,235,235)" }
let white = { backgroundColor: "rgb(255,255,255)" }
const trProps = {
...trElement.props,
style: dataItem.dataItem.activated ? white : greyed,
onContextMenu : (e) => {
this.contextMenu.handleContextMenu(e, dataItem)
}
};
return React.cloneElement(trElement, { ...trProps }, trElement.props.children);
}
caller = (contextMenu) => {
this.contextMenu = contextMenu
}
}
For debugging purpose, I've added a setInterval method. Through another snippet in my code, I do change props.data[0].activated to false and the changes do reflect in the console log. So why is shouldComponentUpdate not triggered and how to get it to trigger ?