the next part of codes are inside my app.js: I got this state:

const [open,setOpen] = useState(false)

which is used to determine if a material-ui Alert should appear on the screen for 3 second with this code:

useEffect(()=>{
     setTimeout(()=> {
        setOpen(false)
     },3000)
},[open])

and returned as:

<Collapse in ={open}>
  <Alert severity={severity}>
    {alertMessage}
  </Alert>
</Collapse>

setOpen sent to the component Table as prop

<Table
loading={loading}
data={data}
setAlertState={setOpen}
/>

the next parts are in Table.js: in table.js I am working with:

import{
 useGridApiRef,
 DataGridPro,
 GridOverlay,
 GridActionsCellItem,
 useGridState
} from '@mui/x-data-grid-pro';

when I click to edit the row and then save this function run(this is not the full function ofc):

const handleSaveclick = (id) =>async(event)=>{
   if(validate_edit())
   {
      apiRef.current.updateRow([{...row}]);
      handleAlert("success","Word edited!");
   } 

handleAlert:

const handleAlert = (severity,alertMessage)=>
{
   setSeverity(()=>severity);
   setAlertMessage(()=>alertMessage);
   setAlertState(()=>true);
}

well the problem is that my data grid table updates himself, but when the alert goes true/false the table returns to what was before.

how to handle this render? what I do wrong? thanks in advance.