why bad handling chartjs in a react component when render that component - reactjs

Question

I am working on a digital currency personal project.
My problem is that when I click on any digital currency to show the details of that coin,
The new page must be refreshed to display the chart correctly, or use a tag,
but I use the Link (react-router-dom),
And before refreshing the page, my chart is shown as below.
(https://ibb.co/NFgNMmX)
And after refreshing the page, my chart is shown as below.
(https://ibb.co/DzWRXRY)
and this is my code
const CoinChart = () => {
let id = useParams();
// state
const [chartDay, setChartDay] = useState({
value: "1",
text: "1d"
})
// redux
const dispatch = useDispatch<any>();
const detail = useSelector((state: State) => state.coin_detail.chart);
useEffect(() => {
dispatch(coinChartFetchRequestFunc(id.coin_id, chartDay.value));
}, [chartDay]);
// chart config
const labels = detail.chart?.prices.map((item) => {
if (chartDay.value == "max") {
return (
new Date(item[0]).toLocaleDateString()
)
}
else {
return (
new Date(item[0]).getDate() +
"." +
new Date(item[0]).toDateString().split(/[0-9]/)[0].split(" ")[1] +
" " +
new Date(item[0]).getHours() +
":" +
new Date(item[0]).getMinutes()
);
}
});
const Data = {
labels,
datasets: [
{
fill: true,
drawActiveElementsOnTop: false,
data: detail.chart?.prices.map((item) => {
return item[1];
}),
label: "price(usd)",
borderColor: "#3861fb",
backgroundColor: "#3861fb10",
pointBorderWidth: 0,
borderWidth: 2.5,
},
],
};
return (
//some code
<Line data={Data} />
);
};
Is this problem solvable?
Also, I used translate in some part, and if there are any problems in the above texts, excuse me!