React(Next.js)にて目次を導入したい

エキスパートの皆様、こんにちは

今回お伺いしたいのはReact(Next.js)にて目次を導入する方法です。
Javascriptで導入を試みているのですが、参考になるものはどれもTypescriptで記載されており、Javascriptでどうすればいいのかわかりません。（Reactの理解が不足しているのも要因です。）

具体的な不明点の前に、まずは■状況を記述します。
・Next.jsとJavascriptでブログを作成中
・ブログの内容はheadlessCMS(graphCMS)でリッチテキストで取得
・目次作成のためにtocbotというライブラリを導入( https://tscanlin.github.io/tocbot/ )
・ファイルAでtocbotを読み込み、コンポーネントにしたものをエクスポート
・表示したいページファイル(ファイルB)でファイルBをインポートして表示させた結果、tocbotが目次作成に引用した範囲はファイルAの中だけだった

■ 具体的な不明点
・ファイルBの内容をファイルAからtocbotで目次にするにはどうすれば良いか

■コード
ファイルA(/component/tocbot.js)

javascript
1import { useEffect, Component } from 'react'
2import tocbot from 'tocbot'
3
4const Toc = () => {
5    useEffect(() => {
6        tocbot.init({
7          tocSelector: '.toc',
8          contentSelector: '.body',
9          headingSelector: 'h2, h6',
10        })
11    
12        return () => tocbot.destroy()
13      }, [])
14//
15      const {contentBody} = this.props
16//
17      return (
18          <>
19          <div className="toc" />
20          </>
21      )
22}

ファイルB(/pages/blog/[id].js)

Javascript
1import Toc from '../../components/toc'
2・・・     
3    return (
4            <div className={styles.container}>
5                <Head>
6・・・
7                {Toc()}
8                <div className="body">
9・・・