Hi I need to get text in center of dough nut like the image

import React, { useState } from "react";
import ReactDOM from "react-dom";
import { Doughnut } from "react-chartjs-2";
import "./styles.css";

function App() {
  const options = {
    cutoutPercentage: 60,
    tooltips: {
      callbacks: {
        label: (tooltipItem, data) => {
          // Get the dataset label, global label or fall back to empty label
          let label =
            (data.datasets[tooltipItem.datasetIndex].labels &&
              data.datasets[tooltipItem.datasetIndex].labels[
                tooltipItem.index
              ]) ||
            data.labels[tooltipItem.index] ||
            "";
          setChartText({
            label: label,
            value:
              data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index]
          });
          return false;
        }
      }
    }
  };

  const data = {
    datasets: [
      {
        data: [6.5, 55, 180],
        backgroundColor: ["#5b7232", "#97012e", "#faab18"],
        labels: ["SCORE", "SCORE B", "SCORE C"],
        pointStyle: "circle"
      }
    ]
  };

  const [chartText, setChartText] = useState({
    label: data.datasets[0].labels[0],
    value: data.datasets[0].data[0]
  });
  return (
    <div className="App">
      <div className="chartContainer">
        <Doughnut data={data} options={options} height={400} width={400} />
        <div className="chartInner">
          <div className="chartValue">{chartText.value}</div>
          <div className="chartLable">{chartText.label}</div>
        </div>
      </div>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);