eChartsjs on React - trying to disabling the hover effect on the pointer - reactjs

Question

I'm using echarts-for-react to create a gauge. I'm trying to disable the hover effect on the pointer.
The current behaviour is that I have a circle with a small pointer, and when hovering, the pointer covers the text. I've tried setting emphasis: null but it didn't change anything.
Here's the pictures demonstrating this issue:
Normal Behaviour
When hovering
Here's my code:
const series = {
type: 'gauge',
radius: '100%',
startAngle: '-20',
endAngle: '200',
clockWise: false,
data: [ltv],
max: 150,
axisLine: {
show: true,
lineStyle: {
width: '12',
color: [[0.2, '#e2da34'], [0.4, '#c2e234'], [0.6, '#7dea52'], [0.8, '#c2e234'], [1, '#e2da34']],
shadowColor: '#f5f5f5',
shadowBlur: 10,
shadowOffsetX: 5,
shadowOffsetY: 5
}
},
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
pointer: {
length: '100%',
width: '4'
},
itemStyle: {
color: '#d1d1d1',
borderWidth: 5,
borderColor: '#d1d1d1'
},
detail: {
show: true,
formatter: e => [`{val|${e.toFixed(1)}%}`, '{text|Good!}'].join('\n'),
rich: {
val: {
color: '#2f353a',
fontWeight: 'bold',
fontFamily: 'SegoePro-Bold',
fontSize: '24'
},
text: {
color: '#9c9c9c',
fontFamily: 'SegoePro-Regular',
fontSize: '12'
}
},
offsetCenter: [0, 0],
padding: [40, 10, 0, 10],
width: 85,
height: 65,
backgroundColor: '#ffffff',
borderWidth: 1,
borderRadius: 50,
borderShadow: '#000000'
}
};
const config = {
title: {
show: false
},
legend: {
show: false
},
tooltip: {
show: false
},
series
};