Cloud Firestoreからのデータフェッチとレンダリング

前提

Next(React)でポモドーロタイマーアプリを作っています！
ApexChartsを用いたグラフの描画はできていますが、グラフのデータはコードに手動で書いた状態です。

実現したいこと

Cloud Firestoreから取得したデータをもとにApexChartsを再描画したいです。
以下のようにApexChartsのコードはクラス型コンポーネントで記述されています。

import React, { Component, useState, useEffect } from 'react';
import { db } from '../../../lib/db';
import ReactApexChart from 'react-apexcharts';

class Graph extends Component<{}, { series: any[]; options: any }> {
  constructor(props) {
    super(props);

    this.state = {
      series: [
        {
          name: 'React',
          data: [31, 40, 28, 51, 42, 109, 100],
        },
        {
          name: 'Next',
          data: [11, 32, 45, 32, 34, 52, 41],
        },
      ],
      options: {
        chart: {
          height: 350,
          type: 'area',
        },
        dataLabels: {
          enabled: false,
        },
        stroke: {
          curve: 'smooth',
        },
        xaxis: {
          type: 'datetime',
          categories: [
            '2021-06-10T00:00:00.000Z',
            '2021-06-11T01:30:00.000Z',
            '2021-06-12T02:30:00.000Z',
            '2021-06-13T03:30:00.000Z',
            '2021-06-14T04:30:00.000Z',
            '2021-06-15T05:30:00.000Z',
            '2021-06-16T06:30:00.000Z',
          ],
          labels: {
            datetimeFormatter: {
              year: 'yyyy',
              month: "MMM'yy",
              day: 'MM/dd',
              hour: 'HH:mm',
            },
          },
        },
        tooltip: {
          x: {
            format: 'dd/MM/yy HH:mm',
          },
        },
      },
    };
  }

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

export default Graph;

そこで、
現在のようにコードに直接各形式ではなく必要な時にCloud Firestoreのデータを取得したいと考えております。

ApexChartsで使用したいCloud Firestorenoのデータ

Cloud Firestoreで使いたいデータ；name, time
コードに直接書きたい定数のデータ；chart, dataLabels, stroke, xaxis(/type, categories, labels), tooltip

試したこと

クラスコンポーネントのまま、必要なタイミングでFirestoreにアクセスするような手法を模索して
コードのリファクタリングを行いグラフを再描画したいですが手詰まりになっている状態です。

何かしらの解決策を教えていただきたいです！

補足情報（FW/ツールのバージョンなど）

package.json

"dependencies": {
    "firebase": "^8.6.5",
    "next": "10.2.1",
    "apexcharts": "^3.27.1",
    "chart.js": "^3.3.2",
    "react": "17.0.2",
    "react-dom": "17.0.2",
  },
  "devDependencies": {
    "@types/node": "^15.3.0",
    "@types/react": "^17.0.6",
    "@types/react-dom": "^17.0.5",
    "typescript": "^4.2.4"
  }