How do I stop via a button in the "Menu.jsx" component, call a Dialog within "Register.jsx"

Question

Personal talk,

I set up a page that has a menu (inside the file "Menu.jsx"), in this menu has a button, I want to open a "dialog", like a pop-up to register notes. This dialog has its own file "Cadastro.jsx"

Menu.jsx

...
export default function ButtonAppBar() {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <AppBar position="static">
        <Toolbar>
          <Button variant="contained"
            style={{ marginRight: 50 }}
            **onClick={() => ???????}**
          >Cadastrar Notas</Button>
          
          <Typography variant="h5" className={classes.title}>
            Calculadora Darf IR Trader
          </Typography>
          <Button color="inherit">Ajuda</Button>
        </Toolbar>
      </AppBar>
    </div>
  );
}

Cadastro.jsx

export default function FormDialog() {
  const [open, setOpen] = React.useState(false);

  const handleClickOpen = () => {
    setOpen(true);
  };

  const handleClose = () => {
    setOpen(false);
  };

  return (
    <div>
      <Dialog open={open} onClose={handleClose} aria-labelledby="form-dialog-title">
        <DialogTitle id="form-dialog-title">Cadastro de Notas</DialogTitle>
        <DialogContent>
          <DialogContentText>
...

Answer 1

The easy solution I see without looking at the rest of the code is that you externalize the state that changes the Dialog view, ie if both components you showed are within the page component Menu, you could:

1. Put the const [open, setOpen] = React.useState(false);, and the functions handleClickOpen, handleClose in the parent component of both, (which should be the Menu).
2. Pass off as props the function handleClickOpen for the component ButtonAppBar, and use this in the place you placed the questions (?)
3. Pass off as props the value of open and handleClose for the component FormDialog