How to load data dynamically with recharts correctly? - reactjs

Question

Problem:
I am creating a react application. There I am using recharts to draw a bar chart. But It is not drawing for the data set which is dynamically loaded.
My code is like this.
import React from "react";
import {
BarChart,
Bar,
Cell,
XAxis,
YAxis,
CartesianGrid,
Tooltip,
Legend,
} from "recharts";
let data = [];
let item;
const data1 = [
{
id: 'Page A', count: 2400,
},
{
id: 'Page B', count: 2210,
},
{
id: 'Page C', count: 2290,
},
{
id: 'Page D', count: 2000,
},
{
id: 'Page E', count: 2181,
},
{
id: 'Page F', count: 2500,
},
{
id: 'Page G', count: 2100,
},
];
const addItemToData = (el) => {
item = {
id: el.id,
count: 2,
};
data.push(item);
};
const OffenceStatusChart = ({ offences }) => {
if (Object.keys(offences) !== 0) {
Object.values(offences).map((el, index) =>
addItemToData(Object.values(el)[1])
);
}
if (data1) {
console.log(data1);
console.log(data)
}
return (
<React.Fragment>
{data? (<BarChart
width={800}
height={300}
data={data}
margin={{
top: 5,
right: 30,
left: 20,
bottom: 5,
}}
>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="id" />
<YAxis />
<Tooltip />
<Legend />
<Bar dataKey="count" fill="#8884d8" />
</BarChart>):null}
</React.Fragment>
);
};
export default OffenceStatusChart;
In here data1 array data set is working correctly but for data array data set it showing the chart as like this.
when I hover over the graph it shows like this.
In the inspect window is showing like this.
the data array is like this.
the data1 array is like this.
Both arrays are in same format but for the data array it is not drawing the bar char but for data1 array. I tried to realize so much what is this error but I was completely helpless so that is why I asked it here. So if someone can help me to solve this issue it really really grateful. Thank you