ApexChart: Dunot chart ir not showing labels - reactjs

Question

I'm having a problem with donut charts in ApexCharts in my React App.
I have an API that returns to me a JSON and I pass this JSON data to some charts. The chart it's showing correct data, but the label isn't showing anything.
If I change something in the ChartComponent, for example, change the 'fontSize' from 15 to 10 the values ​​of the labels are shown, but when rendering the screen, they disappear and return to 0.
see here how the graphs are appearing
see here how the graphs are when I change the 'fontSize'
App()
export default function App() {
const referenceDate = new Date();
const currentYear = referenceDate.getFullYear();
const currentMonth = referenceDate.getMonth() + 1;
const currentMonthName = referenceDate.toLocaleString("default", {
month: "long",
});
const [month, setMonth] = useState(currentMonthName);
const [monthId, setMonthId] = useState(currentMonth);
const [apiData, setApiData] = useState();
useEffect(() => {
async function fillData() {
if (month) {
await getData(currentYear, monthId).then((response) =>
setApiData(response)
);
}
}
fillData();
}, [monthId]);
const handleChange = (e) => {
const selectedMonth = e.target.value;
const selectedMonthId = Months[e.target.value].id;
setMonth(selectedMonth);
setMonthId(selectedMonthId);
};
return (
<>
<div className={styles.chartGroup}>
<ChartCard title="Business Unit Head" value={apiData ? apiData['first'] : 0}></ChartCard>
<ChartCard title="Financial" value={apiData ? apiData['second'] : 0}></ChartCard>
</div>
<div className={styles.chartGroup}>
<ChartCard title="Commercial And Pipeline [LATAM]" value={apiData ? apiData['third'] : 0}></ChartCard>
<ChartCard title="Commercial And Pipeline [NAM]" value={apiData ? apiData['fourth'] : 0}></ChartCard>
</div>
<div className={styles.chartGroup}>
<ChartCard title="HR And Recuitment" value={apiData ? apiData['fifth'] : 0}></ChartCard>
<ChartCard title="Delivery" value={apiData ? apiData['sixth] : 0}></ChartCard>
</div>
</div>
</>
);
}
const getData = async (year, month) => (await axiosInstance.get(`/homeChart/${year}/${month}`)).data;
async function generateChartData(data) {
if (data) {
return data;
} else {
console.log("no data");
}
}
ChartComponent
export default function ChartCard(props) {
let progressValue = 0;
let lapseValue = 0;
const data = props.value;
progressValue = data;
lapseValue = 100 - data;
const options = {
colors: ["#0ead69", "#e71d36"],
labels: ["Progress", "Lapse"],
title: {
text: props.title,
align: "center",
style: {
fontSize: "15px",
fontWeight: "normal",
textDecoration: "underline",
},
},
stroke: {
width: 0,
},
legend: {
show: false,
},
dataLabels: {
enabled: false,
},
plotOptions: {
pie: {
expandOnClick: true,
donut: {
background: "white",
labels: {
show: true,
total: {
show: true,
fontSize: "15",
fontWeight: 10,
formatter: function () {
return data + "%";
},
},
name: {
show: false,
},
value: {
show: true,
},
},
},
},
},
};
const series = [progressValue, lapseValue];
return (
<>
<div className={styles.ChartDiv}>
<Chart
data={data}
type="donut"
width="100%"
height={140}
series={series}
options={options}
/>
</div>
</>
);
}
JSON return
{
"first": 4,
"second": 24,
"third": 2.5,
"forth": 9.5,
"fifth": 22,
"sixth": 2
}