[Bug] setDimensionIndex(null) did not reset symbol style

Version

2.0.02

Link to Minimal Reproduction

null

Steps to Reproduce

const getData = () =>
['2:00', '4:00', '6:00', '8:00', '10:00', '12:00', '14:00', '16:00', '18:00'].map(time => ({
time,
value: Math.random() * 10
}));

const getLineSpec = () => ({
type: 'line',
data: {
values: getData()
},
xField: 'time',
yField: 'value',
crosshair: {
xField: {
label: {
visible: true
}
}
},
point: {
style: {
size: 0,
fill: 'white',
stroke: null,
lineWidth: 2,
},
state: {
dimension_hover: {
size: 8,
},
},
},
});

const getBarSpec = () => ({
type: 'bar',
data: {
values: getData()
},
xField: 'time',
yField: 'value',
crosshair: {
xField: {
label: {
visible: true
}
}
}
});

const root = document.getElementById(CONTAINER_ID);
const { VChart } = ReactVChart;
const { useState, useRef, useEffect, useCallback } = React;

const Card = () => {
const [lineSpec, setLineSpec] = useState(getLineSpec());
const [barSpec, setBarSpec] = useState(getBarSpec());
const lineChartRef = useRef(null);
const barChartRef = useRef(null);

useEffect(() => {
window['vchart'] = lineChartRef.current;
}, []);

const handleSwitchData = () => {
setLineSpec(getLineSpec());
setBarSpec(getBarSpec());
};

const handleLineChartDimensionHover = useCallback(params => {
if (!barChartRef.current) {
return;
}

const dimensionValue = params.dimensionInfo && params.dimensionInfo[0] && params.dimensionInfo[0].value;

if (dimensionValue != null && params.action !== 'leave') {
  barChartRef.current.setDimensionIndex(dimensionValue, { tooltip: false });
} else {
  barChartRef.current.setDimensionIndex(null, { tooltip: false });
}

}, []);
const handleBarChartDimensionHover = useCallback(params => {
if (!lineChartRef.current) {
return;
}
const dimensionValue = params.dimensionInfo && params.dimensionInfo[0] && params.dimensionInfo[0].value;

if (dimensionValue != null && params.action !== 'leave') {
  lineChartRef.current.setDimensionIndex(dimensionValue, { tooltip: false });
} else {
  lineChartRef.current.setDimensionIndex(null, { tooltip: false });
}

}, []);

return (

<div className="inner-container" style={{ display: 'flex' }}>
<div style={{ flex: 1 }}>


<div style={{ flex: 1 }}>



<button
style={{ position: 'absolute', top: 0, left: '50%', transform: 'translate(-50%, 0)' }}
onClick={handleSwitchData}
>
Switch Data


);
};

ReactDom.createRoot(root).render();

// release react instance, do not copy
window.customRelease = () => {
ReactDom.unmountComponentAtNode(root);
};

Current Behavior

Expected Behavior

symbol style reset to normal

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

No response