I am trying to create a React google chart component (LineChart) and i want it to be dynamic (Displaying according to the data coming from my Database).
i structured the data skeleton according to how React Google Chart is waiting the data to be Exple:
export const bodyMassdata = [
["Year", "index"],
["Jan", 23],
["Feb", 13],
["Mar", 33],
["Apr", 14],
["May", 46],
["Jun", 18,],
["Jul", 20],
["Aug", 57],
["Sep", 26],
["Oct", 29],
["Nov", 13],
["Dec", 37],
]
then:
<GraphComponent
graphID={"patientBodyMass"}
width={"100%"}
height={"270px"}
chartType={"LineChart"}
data={bodyMassdata}
options={bodyIndexOptions}
/>
By doing it with hardcore data, it works fine:

This is what i did to render it as dynamic. I declared the array at first:
let bmiData = [
["test", "Charger"]
];
then i updated it with the data coming from the backend.
useEffect(()=>{
if (clinicEntries.length > 0) {
clinicEntries.map((item: ClinicEntry) => {
bmiData.push([new Date(item.dateAdd).toLocaleString('default', { month: 'short' }), item.bodyMassIndex as any]);
});
}
console.log("BodyMassIindex array:", bmiData);
console.log("First ARRAY", bodyMassdata);
}, [clinicEntries])
then when i passed the "bmiData" to the graph component as Data i have his error:

i did a console.log of the "bmiData" to see if it is tructured as the graph is waiting and it is correct. If you noticed, it is the exact and same structure as the hardcore data.