javascript - Apexcharts ブラシ チャートが反応コンポーネントで機能しない

Question

反応するapexchartsを使用しています。ブラシ チャートを使用するとApexchartsがエラーを通過するチャートになります。カスタマイズされたデータを含むコードを以下に示します。ローカル コンポーネントでブラシ チャートを使用すると、コードの後に​​言及したエラーに直面しています

import React, { Component } from "react";
import ReactApexChart from "apexcharts";

class LineChartDemo extends Component {
  constructor(props) {
    super(props);

    this.state = {
      series: [
        {
          name: "series1",
          data: [31, 40, 28, 51, 42, 109, 100],
        },
      ],
      options: {
        chart: {
          id: "chartyear",
          type: "area",
          height: 160,
          background: "#F6F8FA",
          toolbar: {
            show: false,
            autoSelected: "pan",
          },
          events: {
            mounted: function (chart) {
              var commitsEl = document.querySelector(".cmeta span.commits");
              var commits = chart.getSeriesTotalXRange(
                chart.w.globals.minX,
                chart.w.globals.maxX
              );

              commitsEl.innerHTML = commits;
            },
            updated: function (chart) {
              var commitsEl = document.querySelector(".cmeta span.commits");
              var commits = chart.getSeriesTotalXRange(
                chart.w.globals.minX,
                chart.w.globals.maxX
              );

              commitsEl.innerHTML = commits;
            },
          },
        },
        colors: ["#FF7F00"],
        stroke: {
          width: 0,
          curve: "smooth",
        },
        dataLabels: {
          enabled: false,
        },
        fill: {
          opacity: 1,
          type: "solid",
        },
        yaxis: {
          show: false,
          tickAmount: 3,
        },
        xaxis: {
          type: "datetime",
        },
      },

      seriesYears: [
        {
          name: "series1",
          data: [31, 40, 28, 51, 42, 109, 100],
        },
      ],
      optionsYears: {
        chart: {
          height: 200,
          type: "area",
          background: "#F6F8FA",
          toolbar: {
            autoSelected: "selection",
          },
          brush: {
            enabled: true,
            target: "chartyear",
          },
          selection: {
            enabled: true,
            xaxis: {
              min: new Date("26 Jan 2014").getTime(),
              max: new Date("29 Mar 2015").getTime(),
            },
          },
        },
        colors: ["#7BD39A"],
        dataLabels: {
          enabled: false,
        },
        stroke: {
          width: 0,
          curve: "smooth",
        },
        fill: {
          opacity: 1,
          type: "solid",
        },
        legend: {
          position: "top",
          horizontalAlign: "left",
        },
        xaxis: {
          type: "datetime",
        },
      },
    };
  }

  render() {
    debugger;
    return (
      <div id="wrapper">
        <div id="chart-months">
          <ReactApexChart
            options={this.state.options}
            series={this.state.series}
            type="area"
            height={160}
          />
        </div>

        <h5 class="github-style">
          <img
            class="userimg"
            src="https://picsum.photos/200/200/?image=1031"
            data-hovercard-user-id="634573"
            alt=""
            width="38"
            height="38"
          />
          <div class="userdetails">
            <a class="username">coder</a>
            <span class="cmeta">
              <span class="commits"></span> commits
            </span>
          </div>
        </h5>

        <div id="chart-years">
          <ReactApexChart
            options={this.state.optionsYears}
            series={this.state.seriesYears}
            type="area"
            height={200}
          />
        </div>
      </div>
    );
  }
}

export default LineChartDemo;

次のエラーで

キャッチされていない TypeError: クラスを関数として呼び出すことはできません

反応コンポーネントで apexcharts 統合の正しい方法を使用していますか?