I have to render a chart js linechart with order data for each month from the json object returned from the API.

Sample JSON Object

[
 {
   yearCount:2021,
   ordersCount:23,
   monthCount:10,
   dayCount:20
 },
 {
   yearCount:2021,
   ordersCount:21,
   monthCount:10,
   dayCount:22
 },
 {
   yearCount:2021,
   ordersCount:21,
   monthCount:12,
   dayCount:26
 }
]

After getting the data from API I will loop through it and get the count of total orders for that month like this from the dashboard component.

    const [data , setData] = useState([]);

    for (let i = 0; i < 12; i++) {
        var count = 0;
        for (let j = 0; j < orderData.length; j++) {
            if (orderData[j].MonthNumber == i + 1) {
                count = count + orderData[j].TotalOrderCompleted;
            }
        }
        setData(...data , count);
    }

So that I will get the total count for each month that has orders and for other months 0. After that, from the main Dashboard component, I will pass this data as props to the My linechart component where I change the data dataset to the props data received. However, the data passed from the dashboard component is not getting updated. I tried to console.log the data array which is working fine.