fontSize in Treemap react apexchart not working - reactjs

Question

I'm using react apexcharts to render a treemap
I'm using fontSize inside dataLabels to set fontSize but it isn't working.
dataLabels: {
//enabled: true,
style: {
fontSize: "20px",
},
Here is the screenshot
Also I have used -
return `${textList[0]}
${textList[1]}
${textList[2]}`
-to return string in multiple lines but that also doesn't seem to be working.
Below is the full code
import React from 'react';
//import ReactApexChart from 'react-apexcharts';
import { ApexOptions } from "apexcharts";
import dynamic from 'next/dynamic';
import { getTenantDetails } from "utils/assetOverview";
const ReactApexChart = dynamic(() => import('react-apexcharts'), { ssr: false });
type datapointType={
value: number
seriesIndex: number
dataPointIndex: number
}
type tenantType={
x:string,
y:number
}
const TreeMap : React.FC<{areaChecked:boolean,assetCode:string}> = ({areaChecked,assetCode}) => {
let {tenantList} = getTenantDetails(assetCode);
let tenants = [] as tenantType[]
tenants = tenantList && tenantList.map((tenant)=>{
if(areaChecked){
return {
"x":`${tenant.name}\n${tenant.area}ft (${tenant.percentage}%)\n${tenant.years}`,
"y":tenant.area
}
}else{
return {
"x":`${tenant.name}\n$${tenant.revenue} (${tenant.percentage}%)\n${tenant.years}`,
"y":tenant.revenue
}
}
})
const series =[
{
data:tenants
}
]
const options:ApexOptions = {
legend: {
show: false
},
colors:['#002776'],
chart: {
height: 260,
toolbar:{
show:false
}
},
plotOptions: {
treemap: {
enableShades: false
}
},
dataLabels: {
//enabled: true,
style: {
fontSize: "20px",
},
formatter: function(text:string,o:datapointType){
let textList = text.split("\n");
return `${textList[0]}
${textList[1]}
${textList[2]}`
}
}
}
return (
<React.Fragment>
<ReactApexChart options={options} series={series} type="treemap" height={260} />
</React.Fragment>
);
}
export default TreeMap;
Also tried to set fontSize in global.scss file but the text in each rectangle overflows- Here is the screenshot
.apexcharts-data-labels > text {
font-size: 10px !important;
}
SO tried to add
.apexcharts-data-labels > text {
overflow-wrap: break-word !important;
}
but the above code doesn't seem to work