如何在 React 中使用多材质 ui 对话框？

我想在注册页面和登录页面中使用两个对话框。我想要做的实现是点击首页上的注册按钮时显示的注册屏幕，以及点击注册页面上的登录按钮时显示的登录屏幕。

我在 App.js 上写了打开状态。但问题是当它用 App.js 编写时，两个 modal open..

有谁知道怎么解决？

应用程序.js

  const App = () => {

    const [open, setOpen] = useState(false);
    
    const handleClickOpen = () => {
      setOpen(true);
    };
  
    const handleClose = () => {
      setOpen(false);
    };


    return (
      <div>
        <Top handleClickOpen={handleClickOpen}/>
        <SignupModal open={open} handleClose={handleClose} />
        <LoginModal open={open} handleClose={handleClose} />
      </div>
    )

顶.js

const Top = (props) => {
    const classes = useStyles();

    return (
        <React.Fragment>
            <div style={style}>
            <Button variant="outlined" className={classes.loginButton} onClick={props.handleClickOpen}>
              Login
            </Button>
            </div>
            <h1>Toppage</h1>
        </React.Fragment>
    );
}

注册Modal.js

const SignupModal = (props) => {
  return (
    <div>
      <Dialog
        open={props.open}
        onClose={props.handleClose}
        aria-labelledby="alert-dialog-title"
        aria-describedby="alert-dialog-description"
      >
        <DialogTitle id="alert-dialog-title"　className={classes.title}>Sign up</DialogTitle>
        <DialogContent className={classes.content}>
            <div className={classes.text}> 
                <TextField id="standard-basic" label=“name” fullWidth/>
                <TextField id="standard-basic" label=“email” fullWidth/>
                <TextField id="standard-basic" label=“password” fullWidth/>
                <TextField id="standard-basic" label=“pass”word fullWidth/>
            </div>
        </DialogContent>
        <p className={classes.toLogin}>to Login</p>
        <DialogActions>
          <Button onClick={props.handleClose} className={classes.signUpButton}>
            Send
          </Button>
        </DialogActions>
      </Dialog>
    </div>
  );
}

登录模式文件

const LoginModal = (props) => {
  return (
    <div>
      <Dialog
        open={props.open}
        onClose={props.handleClose}
        aria-labelledby="alert-dialog-title"
        aria-describedby="alert-dialog-description"
      >
        <DialogTitle id="alert-dialog-title"　className={classes.title}>Login</DialogTitle>
        <DialogContent className={classes.content}>
            <div className={classes.text}> 
                <TextField id="standard-basic" label=“name” fullWidth/>
                <TextField id="standard-basic" label=“pass”word fullWidth}/>
            </div>
        </DialogContent>
        <DialogActions>
          <Button onClick={props.handleClose} className={classes.signUpButton}>
            Login
          </Button>
        </DialogActions>
      </Dialog>
    </div>
  );
}
export default LoginModal