Only title is not updated in react-chartjs-2 doughnut chart - reactjs

Question

I am using react-chartjs-2 to implement a doughnut chart in my website.
Below is the code I am using to render the chart.
const Doughnut = (props) => {
const { title, labels, colors, projects, percentages, width, height } = props;
console.log(`title:${title}`); //this logs proper title
const plugins = [
{
beforeDraw: function (chart) {
console.log(`title:${title}`); //this logs previous title and thus renders previous title
var width = chart.width,
height = chart.height,
ctx = chart.ctx;
ctx.restore();
var fontSize = (height / 240).toFixed(2);
ctx.font = fontSize + "em sans-serif";
ctx.textBaseline = "top";
var text = `${title}`,
textX = Math.round((width - ctx.measureText(text).width) / 2),
textY = height / 2;
ctx.fillText(title, textX, textY);
ctx.save();
},
},
];
const data = {
datasets: [
{
data: percentages,
backgroundColor: colors,
},
],
};
return (
<DoughnutChart
data={data}
plugins={plugins}
width={width}
height={height}
/>
);
};
I am passing doughnut chart details from my parent component to child component and all props are passed correctly. When I log props.title outside beforeDraw function then it logs the proper value but when I log props.title inside beforeDraw function then it logs the previous value of title and thus it renders the previous value of title.
what am I doing wrong here?