No text shown in dialog box (react js dialog box)? - reactjs

Question

I use https://www.npmjs.com/package/react-bootstrap-dialog#dialogprompt-generators for my notification generating module. but only display buttons and no any text message shown in dialogbox..
enter image description here
onClick () {
this.dialog.show({
title: 'Greedings',
body: 'How are you?',
actions: [
Dialog.CancelAction(),
Dialog.OKAction()
],
bsSize: 'small',
onHide: (dialog) => {
dialog.hide()
console.log('closed by clicking background.')
}
})
}
This is the code part i used for that..Help me..
I have used material dashboard react free template for my project development, So in this dialog box doesn't work, but when i use codesandbox, it works properly, doesn't it work with material dashboard? .I can't understand why,If you know, Help me..
codesandbox.io/s/amazing-glade-lh5tl
import React from "react";
import firebase from "../../config/firebase.js";
import PropTypes from "prop-types";
import carfix from "./s.jpg";
// react plugin for creating charts
import {Link, withRouter} from 'react-router-dom';
import ChartistGraph from "react-chartist"; // #material-ui/core
import withStyles from "#material-ui/core/styles/withStyles";
import Icon from "#material-ui/core/Icon"; // #material-ui/icons
import Store from "#material-ui/icons/Store";
import Warning from "#material-ui/icons/Warning";
import DateRange from "#material-ui/icons/DateRange";
import LocalOffer from "#material-ui/icons/LocalOffer";
import Update from "#material-ui/icons/Update";
import ArrowUpward from "#material-ui/icons/ArrowUpward";
import AccessTime from "#material-ui/icons/AccessTime";
import Accessibility from "#material-ui/icons/Accessibility";
import BugReport from "#material-ui/icons/BugReport";
import Code from "#material-ui/icons/Code";
import Cloud from "#material-ui/icons/Cloud"; // core components
import GridItem from "components/Grid/GridItem.jsx";
import GridContainer from "components/Grid/GridContainer.jsx";
import Table from "components/Table/Table.jsx";
import Tasks from "components/Tasks/Tasks.jsx";
import CustomTabs from "components/CustomTabs/CustomTabs.jsx";
import Danger from "components/Typography/Danger.jsx";
import Card from "components/Card/Card.jsx";
import CardHeader from "components/Card/CardHeader.jsx";
import CardIcon from "components/Card/CardIcon.jsx";
import CardBody from "components/Card/CardBody.jsx";
import CardFooter from "components/Card/CardFooter.jsx";
import WorkAssign from "pages/work_assignmt.js";
import WorkDone from "pages/work_done.js";
import Modal from 'react-bootstrap/Modal';
import {Button} from 'react-bootstrap'
import Dialog from 'react-bootstrap-dialog'
import { bugs, website, server } from "variables/general.jsx";
import { dailySalesChart, emailsSubscriptionChart, completedTasksChart } from "variables/charts.jsx";
import dashboardStyle from "assets/jss/material-dashboard-react/views/dashboardStyle.jsx";
class Dashboard extends React.Component { constructor(props) {
super(props);
this.onClick = this.onClick.bind(this)
this.state = {
field1:0,
field2:0,
field3:0,
isDialogOpen: false
}; }
onClick () {
this.dialog.show({
title: 'Greedings',
body: 'How are you?',
actions: [
Dialog.CancelAction(),
Dialog.OKAction()
],
bsSize: 'small',
onHide: (dialog) => {
dialog.hide()
console.log('closed by clicking background.')
}
}) }
componentWillMount = async() =>{
this.setFieldData(); };
handleChange = (event, value) => {
this.setState({ value }); };
handleChangeIndex = index => {
this.setState({ value: index }); };
setFieldData = async() => {
var ref = firebase.database().ref("Daily Work Data").child("02-10-2019").child("Field 1");
var sum=0;
var ref = firebase.database().ref("Daily Work Data").child("02-10-2019").child("Field 2");
sum=0;
this.setState({field2: sum});
var ref = firebase.database().ref("Daily Work Data").child("02-10-2019").child("Field 3");
sum=0;
await ref.once('value',function (snapshot) {
snapshot.forEach(element => {
sum = sum + element.val().amount;
});
});
this.setState({field3: sum});
};
render() { const { classes } = this.props;
return (
<div
className="App"
style={{
backgroundImage: `linear-gradient(0deg,rgba(20,100,20,0.5), rgba(9, 93, 225, 0.0)),url(${carfix})`
}}>
<div className="wrappe">
<div>
<Dialog ref={(component) => { this.dialog = component }} />
</div>
<div>
<GridContainer>
<GridItem xs={12} sm={6} md={4}>
<Card>
<Button variant="underlined"
onClick={this.onClick}>
<CardHeader color="warning" stats icon>
<CardIcon color="warning">
<i class="material-icons">notifications_active</i>
</CardIcon>
<p className={classes.cardCategory}></p>
<h4 className={classes.cardTitle}>New Notifications</h4>
</CardHeader>
<CardFooter stats>
<div className={classes.stats}>
<hr/>
</div>
</CardFooter>
</Button>
</Card>
</GridItem>
<GridItem xs={12} sm={6} md={4}>
<Card>
<Button variant="underlined"
onClick={this.onClick}>
<CardHeader color="primary" stats icon>
<CardIcon color="primary">
<i class="material-icons">pan_tool</i>
</CardIcon>
<p className={classes.cardCategory}></p>
<h4 className={classes.cardTitle}>Pending Notifications</h4>
</CardHeader>
<CardFooter stats>
<div className={classes.stats}>
<hr/>
</div>
</CardFooter>
</Button>
</Card>
</GridItem>
<GridItem xs={12} sm={6} md={4}>
<Card>
<Button variant="underlined"
onClick={this.onClick}>
<CardHeader color="danger" stats icon>
<CardIcon color="danger">
<i class="material-icons">thumb_up</i>
</CardIcon>
<p className={classes.cardCategory}></p>
<h4 className={classes.cardTitle}>Responded Notifications</h4>
</CardHeader>
<CardFooter stats>
<div className={classes.stats}>
<hr/>
</div>
</CardFooter>
</Button>
</Card>
</GridItem>
</GridContainer>
<div>
</div>
</div> </div> </div>
); } }
Dashboard.propTypes = { classes: PropTypes.object.isRequired };
export default withStyles(dashboardStyle)(Dashboard);