AntV Pie Chart Plot Click event referring to the initial state variable value , not accessing the updated state value - antv

Question

import React, { useState } from 'react';
import 'antd/dist/antd.css';
import { Select, Button } from 'antd';
import { Pie } from '#ant-design/plots';
export default function App() {
const [selectedInputValue, setSelectValue] = useState('lucy');
const [pieChartData, setPieChartData] = useState([
{ type: 'lucy-1', value: 12 },
{ type: 'lucy-2', value: 13 },
{ type: 'lucy-4', value: 2 },
{ type: 'lucy-3', value: 6 },
]);
const config = {
appendPadding: 10,
data: pieChartData,
angleField: 'value',
colorField: 'type',
radius: 0.75,
label: {
type: 'spider',
labelHeight: 28,
content: '{name}\n{percentage}',
},
legend: {
display: true,
},
interactions: [
{
type: 'element-selected',
},
{
type: 'element-active',
},
],
onReady: (plot) => {
plot.on('element:click', (...args) => {
console.log(selectedInputValue);
updateChartValue();
});
},
};
const updateChartValue = () => {
if (selectedInputValue === 'lucy') {
const data = [
{ type: 'lucy-1', value: 12 },
{ type: 'lucy-2', value: 13 },
{ type: 'lucy-4', value: 2 },
{ type: 'lucy-3', value: 6 },
];
setPieChartData(data);
} else if (selectedInputValue === 'jack') {
const data = [
{ type: 'jack-1', value: 12 },
{ type: 'jack-2', value: 13 },
{ type: 'jack-4', value: 2 },
{ type: 'jack-3', value: 6 },
];
setPieChartData(data);
} else if (selectedInputValue === 'Yiminghe') {
const data = [
{ type: 'Yiminghe-1', value: 12 },
{ type: 'Yiminghe-2', value: 13 },
{ type: 'Yiminghe-4', value: 2 },
{ type: 'Yiminghe-3', value: 6 },
];
setPieChartData(data);
} else {
const data = [
{ type: 'dummy-1', value: 12 },
{ type: 'dummy-2', value: 13 },
{ type: 'dummy-4', value: 2 },
{ type: 'dummy-3', value: 6 },
];
setPieChartData(data);
}
};
const handleChange = (value) => {
setSelectValue(value);
sdddd = value;
};
return (
<div id="chart">
<Select
value={selectedInputValue}
style={{
width: 120,
marginLeft: '12px',
marginTop: '12px',
}}
onChange={handleChange}
>
<Option value="jack">Jack</Option>
<Option value="lucy">Lucy</Option>
<Option value="Yiminghe">yiminghe</Option>
<Option value="Dummy">Dummy</Option>
</Select>
<Pie {...config} />
<Button onClick={updateChartValue}>Load Data </Button>
</div>
);
}
The variable pieChartData should get loaded based on selectedInputValue when performing the plot.on("element:click") event. But, On the pie chart element click, the state variable selectedInputValue holds the initialized value only.
Other places outside the events of the charts are all able to access the new updated value for selectedInputValue.
Any thoughts on this?