New Dataset not Reflecting Table Display - reactjs

Question

I am able to print the updated value of dataset but the new added row did not reflecting the updated data from the table component display.
I temporarily put the event on keypress to trigger for adding new row on the table, here the simple code that I playing.
function createData(hardware, cost, status) {
return { hardware, cost, status };
}
const tblData = [];
class Main extends React.Component {
constructor(props) {
super(props);
this.state = {
tblData: [],
};
}
render() {
return (
<><><Box
sx={{
width: 500,
maxWidth: '100%',
}}
>
<TextField
fullWidth
label="Scan Here"
id="fullWidth"
onKeyPress={(e) => {
if (e.key === 'Enter') {
//*****--------------------------------------------------
// - Here is the part where I was able to get the updated data but not reflecting on the table display
console.log('Enter key pressed');
tblData.push(createData('blah', 356, 'Yes'));
console.log(tblData);
//
//--------------------------------------------------*****
}
} } />
</Box><TableContainer component={Paper}>
<Table sx={{ minWidth: 650, marginTop: '10px' }} aria-label="simple table">
<TableHead>
<TableRow>
<TableCell>Hardware</TableCell>
<TableCell align="right">Cost</TableCell>
<TableCell align="right">status</TableCell>
</TableRow>
</TableHead>
<TableBody>
{tblData.map((row) => (
<TableRow
key={row.name}
sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
>
<TableCell component="th" scope="row">
{row.hardware}
</TableCell>
<TableCell align="right">{row.cost}</TableCell>
<TableCell align="right">{row.status}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer></>
)
}
}
export default Main;
Any suggestion or comments how to refresh the updated data. TIA

Answer 1

Just pushing element to the state doesn't trigger rerendering.
<TextField
fullWidth
label="Scan Here"
id="fullWidth"
onKeyPress={(e) => {
console.log('Enter key pressed');
this.setState((prev) => {
tblData: prev.tblData.concat([createData('blah', 356, 'Yes')]) // this line is edited.
}))
}}
/>
Hope this would be helpful for you.

Answer 2

It's working now, I just missed the setState to refresh the value.
console.log('Enter key pressed');
tblData.push(createData('blah', 356, 'Yes'));
this.setState({
setState: tblData
});