How to use react material-ui snackbar with existing button? - reactjs

Question

I followed the material UI snack bar for a simple snackbar example. But instead of having a separate button to display snackbar message I want the message to appear when my existing button is clicked.
SnackBarTest.tsx --> ref Reference Link
import React from 'react';
import Button from '#material-ui/core/Button';
import Snackbar from '#material-ui/core/Snackbar';
import IconButton from '#material-ui/core/IconButton';
import CloseIcon from '#material-ui/icons/Close';
export default function SnackBarTest() {
const [open, setOpen] = React.useState(false);
const handleClick = () => {
setOpen(true);
};
const handleClose = (event: React.SyntheticEvent | React.MouseEvent, reason?: string) => {
if (reason === 'clickaway') {
return;
}
setOpen(false);
};
return (
<div>
<Button onClick={handleClick}>Open simple snackbar</Button>
<Snackbar
anchorOrigin={{
vertical: 'bottom',
horizontal: 'left',
}}
open={open}
autoHideDuration={6000}
onClose={handleClose}
message="Note archived"
action={
<React.Fragment>
<Button color="secondary" size="small" onClick={handleClose}>
UNDO
</Button>
<IconButton size="small" aria-label="close" color="inherit" onClick={handleClose}>
<CloseIcon fontSize="small" />
</IconButton>
</React.Fragment>
}
/>
</div>
);
}
Now inside my sample.tsx file
import SnackBarTest from './SnackBarTest';
class Sample extends React.Component {
submitButton(){
//doing some work
}
render(){
return(
<div>
<Button onClick={this.submitButton}>Submit<Button/>
<SnackBarTest />
</div>
)
}
Inside my sample.tsx It will show my existing button and second button for the snack bar. How am I able to move the SnackBarTest button functionality into my existing Button?