Creating doughnut chart in React

Question

I create a sample doughnut in my react project. Now what I want to do is add dynamic content in the center of the chart. I searched in the internet and youtube but I couldn't find any document related to this. If you can please let me know a way to do that. My code is as below.

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Typography from '@material-ui/core/Typography';
import { Grid } from '@material-ui/core';
import Paper from '@material-ui/core/Paper';
import { Doughnut } from 'react-chartjs-2';

const useStyles = makeStyles(theme => ({
  root: {
    background: '#D1D1D2',
    width: '100vw',
    height: '150vh',
  },
  chart: {
    width: '100vw',
    height: '150vh',
  },
}));

function CurrentIssues() {
  const classes = useStyles();

  const data = {
    datasets: [
      {
        data: [6, 7, 8, 5, 9, 6, 7, 8, 5, 9, 6, 6],
      },
    ],
  };

  return (
    <div>
      <Paper className={classes.root} variant="outlined" square>
        <Grid container spacing={3}>
          <Grid item xs={6}>
            <Doughnut className={classes.chart} data={data} />
          </Grid>
        </Grid>
      </Paper>
    </div>
  );
}

export default CurrentIssues;