Error with Apexcharts-React, Property 'options' doesn not exist on type 'Readonly<{}>'

Question

I'm currently working with Next.js, utilizing Typescript and Tailwind CSS for my project. In this endeavor, I am striving to integrate an ApexChart component. However, during the implementation process, I have encountered two seemingly identical errors. The first error message states: "Property 'options' does not exist on type 'Readonly<{}>'.ts(2339)." This error appears to be occurring at a critical juncture within my code snippet. In an attempt to resolve this issue, I have endeavored to create an interface, but unfortunately, my efforts have proven unsuccessful thus far.

import { Anybody } from "next/font/google";
import React, { Component } from "react";
import Chart from "react-apexcharts";

// Define the props interface for the component
interface ApexChartProps {
 series?: Array<{ name: string; data: number[] }>;
 options?: object; // You can replace 'object' with a more specific type if available
}

interface iProps {
  [key: string]: any
}

class ApexChart extends Component<ApexChartProps> {
 constructor(props: ApexChartProps) {
    super(props);
    // Use props if provided, otherwise use default values
    this.state = {
      series: props.series || [
        {
          name: 'series1',
          data: [31, 40, 28, 51, 42, 109, 100]
        }, 
      ],
      options: props.options || {
        chart: {
          height: 350,
          type: 'area'
        },
        toolbar: {
          show: false,
        },
        dataLabels: {
          enabled: false
        },
        stroke: {
          curve: 'smooth',
          
        },
        xaxis: {
          type: 'datetime',
          categories: ["2018-09-19T00:00:00.000Z", "2018-09-19T01:30:00.000Z", "2018-09-19T02:30:00.000Z", "2018-09-19T03:30:00.000Z", "2018-09-19T04:30:00.000Z", "2018-09-19T05:30:00.000Z", "2018-09-19T06:30:00.000Z"]
        },

        tooltip: {
          x: {
            format: 'dd/MM/yy HH:mm'
          },
          theme: "dark",
        },
        labels: {
          style: {
            colors: "#c8cfca",
            fontSize: "10px",
          },
        },
        grid: {
          strokeDashArray: 5,
          borderColor: "#56577A",
        },
        axisBorder: {
          show: false,
        },
        axisTicks: {
          show: false,
        },
        fill: {
          type: "gradient",
          gradient: {
            shade: "dark",
            type: "vertical",
            shadeIntensity: 0,
            gradientToColors: undefined, // optional, if not defined - uses the shades of same color in series
            inverseColors: true,
            opacityFrom: 0.8,
            opacityTo: 0,
            stops: [],
          },
          colors: ["#0075FF", "#2CD9FF"],
        },
        colors: ["#0075FF", "#2CD9FF"],
      },
    };
 }

 render() {
    return (
      <div className="app">
        <div className="row">
          <div className="mixed-chart">
            <Chart
              options={this.state.options}
              series={this.state.series}
              type="area"
              width="100%"
              height="600"
            />
          </div>
        </div>
      </div>
    );
 }
}

export default ApexChart;

It works, it displays fine but there are 2 TS Errors. Would like to get rid of them. I would really appreciate some help!