useEffect(() => {
  const fetchData = async () => {
    try {
      const response = await axios.get('api');
      setGraphValue(response.data);
      const series = [
        { name: 'success', data: [], color: '#C4BFBE' },
        { name: 'failure', data: [], color: '#FF0000' },
      ];

      series[index].data.push({
        x: i >= 12 ? i + ' pm' : i + ' am',
        y: value,
      });

      setChartData({ ...chartConfig, series: series });

      setIsLoading(false);
    } catch (error) {
      console.error('Error fetching data:', error);
      setIsLoading(false);
    }
  };

  fetchData();
}, [timePeriod]);

I have this useEffect code and when I’m fetching my apis the datas are good, but when I want to display them on chart only the x value is rendered from chart

the y value is rendered after i’m saving my code again and is rerendered, please help!

 {chartData?.series ? (
        <Chart
          key={JSON.stringify(chartData.series)}
          options={chartData.options}
          series={chartData.series}
          type="bar"
          height="350"
        />
      ) : (
        <Chart {...chartConfig} />
      )}