Y tengo un código de componente principal

 const Drawer = props => { const theme = useTheme(); const { history } = props; const [open, setOpen] = React.useState(false); const [dialogOpen,setDialogueOpen] = React.useState(false) const handleDialogueOpen = () => { setDialogueOpen(true) } return ( <Box sx={{ display: 'flex' }}> <AppBar position="fixed" open={open}> <Toolbar> <Typography variant="h6" noWrap component="div"> XYZ </Typography> <Button onClick={handleDialogueOpen}>Filter</Button> </Toolbar> </AppBar> <DialogBox dilaogOpenProp={dialogOpen}/> </Box> ); } export default withRouter(Drawer);

tengo un componente hijo

 const DialogBox = (props) => { const [dialogOpenState, setOpen] = React.useState(props.dilaogOpenProp); React.useEffect(() => { setOpen(props.dilaogOpenProp); }, [props.dilaogOpenProp]); const handleDialogClose = () => { setOpen(false) } return ( <> <CssBaseline /> <Dialog fullWidth onClose={() => {}} open={dialogOpenState} maxWidth="xs" sx={{ backdropFilter: "blur(5px)", }} > <DialogTitle>Example Dialog</DialogTitle> <DialogContent>Example Content Here</DialogContent> <DialogActions> <Button onClick={handleDialogClose}>Close</Button> </DialogActions> </Dialog> </> ); } export default DialogBox;

Como puede ver, DialogBox es hijo de Drawer , ambos se guardan en archivos diferentes DialogBox.js y Drawer.js

Puedo enviar un valor booleano a través de un accesorio llamado dilaogOpenProp en DialogBox y puedo cambiar el valor de dialogOpenState , pero también he creado un método en el componente secundario handleDialogClose() que está cambiando el valor del valor booleano de dialogOpenState en el estado local, ya que su valor es también utilizado por el componente principal en el cuadro de diálogo de nombre de variable Abrir para rastrear el estado pero no se actualiza y se crea un error de interfaz de usuario

¿Cómo actualizo dialogOpen en padre y dilaogOpenState en hijo al mismo tiempo durante la invocación de su método hijo handleDialogClose()