ApexCharts with Typescript and ReactJS getting 'No overload matches this call.' error

I am new to typescript and slowly getting used to this bad boy.

I got the ohlcv data from coinpaprika and handed it to ApexCharts.

While I try to map the raw data into ApexCharts, I am getting:

ERROR in src/routes/Chart.tsx:36:30

TS2769: No overload matches this call.
  Overload 1 of 2, '(props: Props | Readonly<Props>): ReactApexChart', gave the following error.
    Type '{ data: { x: string; y: string[]; }[] | undefined; }' is not assignable to type 'number'.
  Overload 2 of 2, '(props: Props, context: any): ReactApexChart', gave the following error.
    Type '{ data: { x: string; y: string[]; }[] | undefined; }' is not assignable to type 'number'.
    34 |                 <ApexChart
    35 |                     type="candlestick"
  > 36 |                     series={[{ data: mappedOhlcData }]}
       |                              ^^^^^^^^^^^^^^^^^^^^^^^^
    37 |                     height={400}
    38 |                     options={{
    39 |                         chart: {

I set up an interface called IohlcvData to let typescript know what types to expect.

export interface IohlcvData {
    time_open: string;
    time_close: string;
    open: number;
    high: number;
    low: number;
    close: number;
    volume: number;
    market_cap: number;
}

While fetching the data, I made sure to tell typescript to expect IohlcvData:

const { isLoading, data } = useQuery<IohlcvData[]>(
        ["ohlcv", coinId],
        () => fetchCoinHistory(coinId),
        { refetchInterval: 10000 }
    );

the IohlcvData interface is also applied to the mappedOhlcData:

const mappedOhlcData = data?.map((data: IohlcvData) => ({
        x: data.time_open,
        y: [data.open.toFixed(2), data.high.toFixed(2), data.low.toFixed(2), data.close.toFixed(2)],
    }));

Then, I called the ApexChart:

                <ApexChart
                    type="candlestick"
                    series={[{ data: mappedOhlcData }]}
                    height={400}
                    options={{
                        chart: {
                            type: "candlestick",
                            toolbar: {
                                show: true,
                                tools: {
                                    download: true,
                                    pan: false,
                                    reset: false,
                                    zoom: false,
                                    zoomin: false,
                                    zoomout: false,
                                },
                            },
                        },

                        title: {
                            text: "CandleStick Chart",
                            align: "center",
                        },
                        xaxis: { type: "datetime" },
                        yaxis: {
                            labels: { formatter: (value: number) => `$${value.toFixed(2)}` },
                            axisBorder: { show: false },
                            axisTicks: { show: false },
                            tooltip: { enabled: true },
                        },
                    }}
                />

the "data:mappedOhlcData" is returning an error.

I have seen others who used the ApexCharts with the same syntax and everything and have no issue or error. Maybe it could be a version issue?

Any suggestion or advice would be appreciated.