javascript - React 関数コンポーネントをクラス コンポーネントに変換する

Question

言語翻訳にはreactreact-i18nextパッケージを使用しています。

私が持っている機能コンポーネントは、エラーなしで正しく動作します

import React, { Suspense } from 'react';
import { useTranslation } from 'react-i18next';

function MyComponent() {
  const { t, i18n } = useTranslation();

  return (<Suspense fallback="loading">
           <h1>{t('Welcome to React')}</h1>
          </Suspense>);
}

export default MyComponent;

これを以下のようにクラスに変換しようとしたとき

import React, { Component, Suspense } from 'react';
import { useTranslation } from 'react-i18next';

class MyComponent extends Component {
    constructor(props) {
        super(props);
    }
    render() {
        const { t, i18n } = useTranslation();
        return (
        <Suspense fallback="loading">
            <h1>{t('hello')}</h1>
        </Suspense>
        );
    }
}

export default MyComponent;

エラーが発生します

フック呼び出しが無効です。フックは、関数コンポーネントの本体内でのみ呼び出すことができます。これは、次のいずれかの理由で発生する可能性があります。

誰かが私が間違っていることを指摘できますか?