la siguiente parte de los códigos está dentro de mi app.js: obtuve este estado:

 const [open,setOpen] = useState(false)

que se utiliza para determinar si debe aparecer una alerta material-ui en la pantalla durante 3 segundos con este código:

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

y devuelto como:

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

setOpen enviado a la tabla de componentes como accesorio

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

las siguientes partes están en Table.js: en table.js estoy trabajando con:

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

cuando hago clic para editar la fila y luego guardo esta ejecución de función (esta no es la función completa de c):

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

manejarAlerta:

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

bueno, el problema es que mi tabla de cuadrícula de datos se actualiza sola, pero cuando la alerta se vuelve verdadera/falsa, la tabla vuelve a ser lo que era antes.

¿Cómo manejar este render? ¿qué hice mal? gracias de antemano.