`componentDidUpdate()` not triggering on a different tab/screen - node.js

Question

I am developing a small game (similar to tictactoe) in React which uses socket.io. He is a description of a scenario were a player makes a move:
Move is sent to the server by emitting a game-move event (from the react client).
Server updates local board array then emits an event containing a copy of the board to the clients(s) via a ${gameId}-board event (clients listen based on the gameId they have).
Upon, the client(s), receiving the event, they update the board with the move played before step one and this reflects on the screen.
The issue is I only see the changes on the screen of the player who played the move and wanted to updated all clients that are in that game (subscribed to the gameId). In other words, updates are only occurring if either person makes a move.
I am using componentDidUpdate() which uses a socket connection to receive events and update the state but for some reason the problem I mentioned above is happening and would appreciate some input. Below is the code for what I just described (minus the server and other components as those are working fine):
class Board extends React.Component<any, any> {
constructor(props: any) {
super(props);
this.state = {
squares: Array(6).fill([]).map(() => Array(7).fill(null)),
errorOccured: false,
errorMessage: "",
gameId: "",
};
}
componentDidMount(): void {
...
}
componentDidUpdate(): void {
// #NOTE: This is not triggering on a different tab/screen
socketConnection.on(`${this.state.gameId}-board`, (message) => {
const data = JSON.parse(message);
this.handleMessage(data);
});
}
handleMessage(data: any) {
if(data && data.errorOccured) {
this.setState({errorOccured: true, errorMessage: data.errorMessage});
} else if(data && !data.errorOccured) {
let updatedBoard = data.game.gameState
this.setState({
board: updatedBoard
});
} else {
this.setState({errorOccured: true, errorMessage: "An error occurred, please try again."});
}
}
handleMove(column: number) {
let isValid = this.isMoveValid(column);
if(!isValid) {
this.setState({
errorOccured: true,
errorMessage: "Invalid Move!"
})
} else {
socketConnection.emit(`game-move`,
...
);
}
}
renderSquare(row: number, col: number, key: number) {
return (
<Square
key = { key }
value = { this.state.squares[row][col] }
onClick = { () => this.handleMove(col) }
/>
);
}
render() {
const status = "Current Player: " + ( this.state.xIsNext ? '👻' : '🤡' );
let square = 0;
return (
<div>
<div className="status">{status}</div>
{
this.state.squares.map((row: any, rowIndex: number) =>
(
<div className="row" key={rowIndex} >
{
(row.map((value: any, colIndex: number) => (
this.renderSquare(rowIndex, colIndex, square++)
)))
}
</div>
)
)
}
</div>
)
}
}
export default Board;
Please don't worry/focus about the design, I am simply using this tiny project as an introduction to React.