'EChartsOption' is not assignable to parameter of type 'EChartOption<Series>'

Question

I am getting this error. Tried to fix but not getting anything. I need to deploy the app. Due to this error I am unable to build the app. Want some help in this.

This is the code part I am getting error

useEffect(() => {
    let elem = document.getElementById("dashboard-title");
    if (elem != null) {
      elem.innerHTML = " <u> Dashboard </u> &nbsp; | &nbsp; Sales ";
    }

    let addIcon = Array.from(
      document.getElementsByClassName(
        "MuiSvgIcon-root MuiSvgIcon-fontSizeLarge css-tzssek-MuiSvgIcon-root"
      ) as HTMLCollectionOf<HTMLElement>
    );
    if (addIcon) {
      addIcon[0].style.fill = "#ffffff";
    }

    let elem2 = Array.from(
      document.getElementsByClassName(
        "MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 css-1ps6pg7-MuiPaper-root"
      ) as HTMLCollectionOf<HTMLElement>
    );
    console.log("..", elem2.length);
    if (elem2) {
      for (let i = 11; i < 18; i++) {
        elem2[i].style.boxShadow = "none";
        elem2[i].style.background = "none";
        elem2[i].style.marginTop = "12px";
      }
      //elem2[12].style.boxShadow = "none";
    }

    let canvasElem = document.getElementsByTagName("canvas");
    if (canvasElem) {
      canvasElem[1].style.marginTop = "-50px";
      canvasElem[2].style.marginTop = "-110px";

      // canvasElem[1].style.marginTop = "-50px";
      // canvasElem[1].style.height = "260px";

      canvasElem[5].style.marginTop = "-20px";
      canvasElem[5].style.height = "280px";

      // canvasElem[6].style.marginTop = "-50px";
      // canvasElem[6].style.height = "260px";

      canvasElem[6].style.marginTop = "-50px";
      canvasElem[7].style.marginTop = "-110px";

      canvasElem[8].style.marginTop = "-50px";
      canvasElem[9].style.marginTop = "-110px";

    }

    let myChartElem = document.getElementById("mychart")!;
    if (document.getElementById("newChart") == null) {
      let chartDom = document.createElement("div");
      chartDom.setAttribute("id", "newChart");
      myChartElem.appendChild(chartDom);
      let myChart = echarts.init(chartDom);
      myChart.setOption(option); // I am getting error in the option
    }
  }, []);

<--- code part for 'option' object--->

const option: EChartsOption = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        crossStyle: {
          color: "#999",
        },
      },
    },

    xAxis: [
      {
        type: "category",
        data: ["Aug 23", "Sep 23", "Oct 23", "Nov 23", "Dec 23", "Jan 24"],
        axisPointer: {
          type: "shadow",
        },
      },
    ],
    yAxis: [
      {
        type: "value",
        name: "Sales",
        min: 0,
        max: 3.5,
        interval: 1,
        axisLabel: {
          formatter: "₹{value}L",
        },
      },
      {
        type: "value",
        name: "Invoice",
        min: 0,
        max: 50,
        interval: 10,
        axisLabel: {
          formatter: "{value}",
        },
      },
    ],
    series: [
      {
        name: "Sales",
        type: "bar",
        tooltip: {
          formatter: (params: any) => {
            return "₹" + params.value.toFixed(2) + "L";
          },
        },
        data: [1.26, 1.59, 1.9, 2.64, 2.87, 3.07],
        itemStyle: {
          color: "#04B572",
        },
      },
      {
        name: "Invoices",
        type: "line",
        yAxisIndex: 1,
        lineStyle: {
          color: "#6F4FED",
          width: 3,
        },
        tooltip: {
          formatter: (params: any) => {
            return params.value.toFixed(0);
          },
        },
        data: [20, 22, 33, 40, 30, 35],
        itemStyle: {
          color: "#6F4FED",
        },
      },
    ],
  };

<---- All imports --->

import { useEffect } from "react";
import * as echarts from "echarts";
import { EChartsOption } from "echarts";
import { Grid, Paper } from "@mui/material";
import CustomizedMenus from "../components/FHMiniDropDown";
import DashboardCustomizeIcon from "@mui/icons-material/DashboardCustomize";
import FHECharts from "../components/FHEcharts";
import FHButton from "../components/FHButton";
import PaymentsOutlinedIcon from "@mui/icons-material/PaymentsOutlined";
import PeopleAltOutlinedIcon from "@mui/icons-material/PeopleAltOutlined";
import CheckCircleOutlineOutlinedIcon from "@mui/icons-material/CheckCircleOutlineOutlined";
import ShoppingBasketOutlinedIcon from "@mui/icons-material/ShoppingBasketOutlined";
import CalendarTodayOutlinedIcon from "@mui/icons-material/CalendarTodayOutlined";
import PlaceOutlinedIcon from "@mui/icons-material/PlaceOutlined";
import { useNavigate } from "react-router-dom";

I am getting the error.

No overload matches this call.
  Overload 1 of 2, '(option: EChartOption<Series> | EChartsResponsiveOption, notMerge?: boolean | undefined, lazyUpdate?: boolean | undefined): void', gave the following error.
    Argument of type 'EChartsOption' is not assignable to parameter of type 'EChartOption<Series> | EChartsResponsiveOption'.
      Type 'EChartsOption' is not assignable to type 'EChartOption<Series>'.
        Types of property 'title' are incompatible.
          Type 'TitleOption | TitleOption[] | undefined' is not assignable to type 'EChartTitleOption | EChartTitleOption[] | undefined'.
            Type 'TitleOption' is not assignable to type 'EChartTitleOption | EChartTitleOption[] | undefined'.
              Type 'TitleOption' is not assignable to type 'EChartTitleOption'.
                Types of property 'textStyle' are incompatible.
                  Type 'LabelOption | undefined' is not assignable to type 'TextStyleWithRich | undefined'.
                    Type 'LabelOption' is not assignable to type 'TextStyleWithRich'.
                      Types of property 'rich' are incompatible.
                        Type 'Dictionary<TextCommonOption> | undefined' is not assignable to type 'RichStyle | undefined'.
                          Type 'Dictionary<TextCommonOption>' is not assignable to type 'RichStyle'.
                            'string' index signatures are incompatible.
                              Type 'TextCommonOption' is not assignable to type 'TextStyle'.
                                Types of property 'borderRadius' are incompatible.
                                  Type 'number | number[] | undefined' is not assignable to type 'number | undefined'.
                                    Type 'number[]' is not assignable to type 'number'.
  Overload 2 of 2, '(option: EChartOption<Series>, opts?: EChartsOptionConfig | undefined): void', gave the following error.
    Argument of type 'EChartsOption' is not assignable to parameter of type 'EChartOption<Series>'.

I tried to find the reason for error and implemented multiple ways to fix but I am coming back to the same error.

Note: It's a Vite React Typescript project using npm apache echarts package for Data visulaization in the dashboard.