Table empties when state updated, need to refresh it - reactjs

Question

When I change a value in the table, it disappears when I update the state with the new value. I have checked state and it is updated correctly but the table is now blank. I am using a bootstrap table.
Everything in state is now updated but the grid is empty, can I use useEffect to do rebind the table?
const GridEdit = () => {
const store = useContext(StoreContext);
const handleBlur = (e, arrayRow, editableFields) => {
const newVals = store.gridItems[0][0];
newVals["Status"] = e.target.innerHTML;
store.gridItems[1](newVals);
console.log("hello ", store.gridItems[0]);
};
const dataTable = store.gridItems[0];
function tableHeaders(data) {
let tableHeaders = [];
if (data.length > 0) {
let headers = Object.keys(data[0]);
headers.map((header) =>
tableHeaders.push(<th key={header}>{header}</th>)
);
}
if (tableHeaders.length === 0) {
return null;
} else return tableHeaders;
}
function tableRows(dataTable) {
let tableLength = dataTable.length;
let table = [];
for (let i = 0; i < tableLength; i++) {
let children = [];
let row = Object.values(dataTable[i]);
const readOnlyFields = row.slice(0, 4);
const editableFields = row.slice(4, 7);
readOnlyFields.map((data) => children.push(<td id={row[0]}>{data}</td>));
editableFields.map((data) =>
children.push(
<td ContentEditable="true" id={row[0]}>
{data}
</td>
)
);
table.push(
<tr key={row} onBlur={(e) => handleBlur(e, i, editableFields)}>
{children}
</tr>
);
}
if (table.length === 0) {
return null;
} else {
return table;
}
}
return (
<tbody className="tableHeaders">
<tr>{tableHeaders(dataTable)}</tr>
{tableRows(dataTable)}
</tbody>
);
};
export default GridEdit;