OnRowClick associated function can not detect changes in props

I have declared the following options which I pass into my datatable as the options prop

let options = {
responsive: "scroll",
selectableRows: false,
viewColumns: false,
print: false,
onRowClick: rowClicked
};

The function rowClicked recieves the following parameters according to the documentation: rowData: string[], rowMeta: { dataIndex: number, rowIndex: number }.

My rowClicked function looks like this:

function rowClicked(centre){
const id = centre[0];
const centre = props.data.centres.find(x=>x.id===id)
setFocusedCentre(centre)
}

basically we take the id out of the first column of the row, then we find the centre from the array of centres using that id, and then we change the state to save that centre under focusedCentre.

There is a huge issue however, props.data.centres DOES NOT CHANGE when props.data.centres changes, how can this be?

If I do a console.log(props.data.centres) INSIDE the rowClicked, it will always show the same values, never changing.
Of course when I do a console.log(props.data.centres) OUTSIDE of the rowClicked function, the changes are always correctly displayed.

Any ideas why the rowClicked function is preventing props.data.centres from updating whenever it actually updates?