Dodanie appBar do tabeli w react js

Witam,
na start zaznaczę że jestem zupełnie nowa w react js więc moje pytanie może być dla niektórych absurdalnie proste. Z nadzieją jednak liczę na pomoc. Otóż mam prosta aplikację i piszę dla niej UI właśnie w react js. Korzystam z komponentów material-UI. Aktualnie mma bardzo ładną tabelkę mianowicie :

const styles = theme => ({
    root: {
        width: '100%',
        marginTop: theme.spacing.unit * 3,
        overflowX: 'auto',
    },
    table: {
        minWidth: 700,
    },
});


let id = 0;

function createData(name, lastName, location, email, status, role) {
    id += 1;
    return {id, name, lastName, location, email, status, role};
}

const data = [
    createData("Jan", "Mucha", "Kraków ", "first@mail", "remote", "admin"),
    createData("Ewa", "Mucha", "Kraków ", "first@mail", "remote", "admin"),
    createData("Maciej", "Mucha", "Kraków ", "first@mail", "remote", "admin"),
    createData("Ula", "Mucha", "Kraków ", "first@mail", "remote", "admin"),
    createData("Iza", "Mucha", "Kraków ", "first@mail", "remote", "admin"),
];

function NextPersonTable(props) {
    const {classes} = props;

    return (
        <Paper className={classes.root}>
            <Table className={classes.table}>
                <TableHead>
                    <TableRow>
                        <TableCell className={classes.head}>ID:</TableCell>
                        <TableCell className={classes.head} numeric>Name:</TableCell>
                        <TableCell className={classes.head} numeric>Last Name</TableCell>
                        <TableCell className={classes.head} numeric>Location</TableCell>
                        <TableCell className={classes.head} numeric>Email</TableCell>
                        <TableCell className={classes.head} numeric>Status</TableCell>
                        <TableCell className={classes.head} numeric>Role</TableCell>
                    </TableRow>
                </TableHead>
                <TableBody>
                    {data.map(n => {
                        return (
                            <TableRow key={n.id}>
                                <TableCell className={classes.innerRow} component="th" scope="row">
                                    {n.id}
                                </TableCell>
                                <TableCell className={classes.innerRow} numeric>{n.name}</TableCell>
                                <TableCell className={classes.innerRow} numeric>{n.lastName}</TableCell>
                                <TableCell className={classes.innerRow} numeric>{n.location}</TableCell>
                                <TableCell className={classes.innerRow} numeric>{n.email}</TableCell>
                                <TableCell className={classes.innerRow} numeric>{n.status}</TableCell>
                                <TableCell className={classes.innerRow} numeric>{n.role}</TableCell>
                            </TableRow>
                        );
                    })}
                </TableBody>
            </Table>
        </Paper>
    );
}

NextPersonTable.propTypes = {
    classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(NextPersonTable);

Teraz mam wybrany już bar z UI material mianowicie App bar with buttons. Teraz mam problem. Nie wiem gdzie powinnam wkleić ten kod od tego komponentu. Czy to powinno być w tej klasie co tabela, czy powinien być nowy plik bar.jsx i jakoś to przekazać? Bradzo proszę o pomoc