How to change the color of the value attribute displayed in the center of the MUI Gauge chart component

I want to use the MUI X Charts gauge but with a custom color for the value attribute displayed at the center. In this case, the 60 displayed at the center of the image provided.

This is the source code for the component:

<Gauge width={100} height={100} value={60} />

I've tried reading through the documentation to find a specific attribute that controls that but cant seem to find it. Here's a link to the documentation. and a screenshot of mui gauge component: .

According to their documentation example, you can use a selector to select the corresponding element. After inspecting the element structure, you can use & .${gaugeClasses.valueText} text to select the text.

import * as React from 'react';
import { Gauge, gaugeClasses } from '@mui/x-charts/Gauge'; // <-- import gaugeClasses 

const settings = {
  width: 200,
  height: 200,
  value: 60,
};

export default function ArcDesign() {
  return (
    <Gauge
      {...settings}
      sx={(theme) => ({
        [`& .${gaugeClasses.valueText}`]: {
          fontSize: 40,
        },
        [`& .${gaugeClasses.valueText} text`]: {
          fill: "#3b82f6" // <-- change text color
        },
      })}
    />
  );
}