ApexCharts Pie/donut charts are not appearing correctly

I'm having a problem with Pie/donut charts in Apex Charts in my React App,

Basically I'm fetching data from google analytics and trying to display it on a pie/donut chart but the chart doesn't render completly like this:

instead it appears like this :

as you can see I get those little "Lines" instead of the full graph and also it works fine if I get one value from the api,

this is the component code :

import axios from "axios"
import { useQuery } from "react-query"
import ReactApexChart from "react-apexcharts";
import { ApexOptions } from "apexcharts";
import Spinner from "../../utils/Spinner/Spinner";
const VisitedPages = () => {
    const { data, isLoading } = useQuery("visitedPages", () => {
        return axios.post('http://localhost:8000/ga/getRealTimeReport', {
            metrics: 'rt:activeUsers',
            dimensions: 'rt:pagePath',
        })
    });
    const labels= data?.data.data.dimensions.map((e: string[]) => e[0]);
    const options = {
        labels,
        theme: {
            monochrome: {
                enabled: false
            }
        },
        responsive: [
            {
                breakpoint: 480,
                options: {
                    chart: {
                        width: "100%"
                    },
                    legend: {
                        show: false
                    }
                }
            }
        ],

    };
    const series = data?.data.data.dimensions.map((e: string[]) => e[1]);

  



    return (
        <div className="col-span-2 bg-white rounded-lg shadow-xl  flex flex-col justify-center items-center">
            {isLoading ? <Spinner /> : <><h1 className="text-3xl font-bold">Visited Pages</h1>
                <ReactApexChart type="pie" options={options} series={series} /></>}

        </div>
    )
}

export default VisitedPages

Ps: I tried it with constant values and it works just fine Idk what's the problem...