Podpięcie przycisku w react js by otwierał nową klasę(dialog window)

Witam,
chciałabym żeby button który mam wstawiony do projektu otwierał dialog window w którym będę uzupełniała dane. NIestety po dodaniu takich elementów projekt albo się nie skompiluje albo po prostu nic się nie dzieje. Ktoś wie może jak podpiąć takie coś do buttona.
Oto moja klasa z przyciskiem:

class Persons extends React.Component {
    constructor(props) {
        super(props);
        this.state = {isToggleOn: true};
        this.handleClick = this.handleClick.bind(this);
    }

    handleClick() {
        this.setState(prevState => ({
            isToggleOn: !prevState.isToggleOn
        }));
    }
    render() {
        return (
            <div>
                <ButtonNavigation/>
                <NextPersonTable/>
                <PersonButton/>
            </div>

        );
    }

}

const ButtonNavigation = () => {
    return (
        <div className={styles2.root}>
            <AppBar position="static">
                <Toolbar>
                    <IconButton className={styles2.menuButton} color="inherit" aria-label="Menu">
                        <MenuIcon/>
                    </IconButton>
                </Toolbar>
            </AppBar>
        </div>
    );
}
const PersonButton = () => {
    return (
        <div style={{marginTop: '15px'}}>
            <Button onClick={(e) => this.handleClick(e)} variant="raised" color="primary" aria-label="add" className={styles2.button}>
                <AddIcon/>
            </Button>
        </div>
    );
}
const styles2 = {
    root: {
        flexGrow: 1,
    },
    flex: {
        flex: 1,
    },
    menuButton: {
        float: 'left',
        marginLeft: -12,
        marginRight: 20,
    },
    button: {
        margin: spacing.unit,
    },
};


export default Persons; 

Atu klasa którą bym chciała uruchamiać podczas kliknięcia przycisku:

import React from 'react';
import Button from '@material-ui/core/Button';
import TextField from '@material-ui/core/TextField';
import Dialog from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import DialogContentText from '@material-ui/core/DialogContentText';
import DialogTitle from '@material-ui/core/DialogTitle';

export default class FormDialog extends React.Component {
  state = {
    open: false,
  };

  handleClickOpen = () => {
    this.setState({ open: true });
  };

  handleClose = () => {
    this.setState({ open: false });
  };

  render() {
    return (
      <div>
        <Button onClick={this.handleClickOpen}>Open form dialog</Button>
        <Dialog
          open={this.state.open}
          onClose={this.handleClose}
          aria-labelledby="form-dialog-title"
        >
          <DialogTitle id="form-dialog-title">Subscribe</DialogTitle>
          <DialogContent>
            <DialogContentText>
              To subscribe to this website, please enter your email address here. We will send
              updates occasionally.
            </DialogContentText>
            <TextField
              autoFocus
              margin="dense"
              id="name"
              label="Email Address"
              type="email"
              fullWidth
            />
          </DialogContent>
          <DialogActions>
            <Button onClick={this.handleClose} color="primary">
              Cancel
            </Button>
            <Button onClick={this.handleClose} color="primary">
              Subscribe
            </Button>
          </DialogActions>
        </Dialog>
      </div>
    );
  }
}

Bardzo proszę o pomoc.
Pozdrawiam