How to customize markings in a Google Pie Chart using React and react-google-charts?

Question

I am using the react-google-charts library to render a Pie Chart in my React application. I want to customize the markings in the chart to display the values in a specific format, similar to the example image below:

Currently, my chart looks like this:

Could someone please guide me on how to achieve this customization in the Google Pie Chart using React and the react-google-charts library?

Here is the code I am using:

import React, { useState } from "react";
import Chart from "react-google-charts";
import "./styles.css";

export default function App() {
  const [stats, setStats] = useState([
    ["Heading", "Hours per Day"],
    ["Test 1", { v: 11, f: "$ 115434" }],
    ["Test 2", { v: 5, f: "$ 5434" }],
    ["Test 3", { v: 20, f: "$ 205434" }],
    ["Test 4", { v: 7, f: "$ 75434" }]
  ]);


  return (
    <div>
       <Chart
        width={"600px"}
        height={"300px"}
        chartType="PieChart"
        loader={<div>Loading Chart</div>}
        data={stats}
        options={{
          title: "Prices",
          pieSliceText: "value",
          fontSize: 10,
          legend: { position: "labeled" },
          is3D: true
        }}
        chartEvents={[
          {
            eventName: "animationfinish",
            callback: () => {
              console.log("Animation Finished");
            }
          }
        ]}
        rootProps={{ "data-testid": "1" }}
      />
    </div>
  );
}