What is going wrong, so that it is an empty page - reactjs

Question

I would like to set up a language selector at the component Header.jsx so that when clicking on the language switch, the content of MainPage.js would change to the selected language.
the files sturcture like this
project / public / locales/ en / translation.json
project/src/i18n.js
project/src/MainPage/mainPage.js
project/Resources/Component/Header.jsx
project/Resources/Component/Footer.jsx
{
"title": "Welcome to react using react-i18next",
"description": {
"part1": "To get started, edit <1>src/App.js</1> and save to reload.",
"part2": "Switch language between English and Chinese using buttons above."
},
"agreement": "Consent",
"agree": "Agree",
"disagree":"Disagree"
}
project / public / locales/ tw / translation.json
{
"title": "歡迎使用 react-i18next",
"description": {
"part1": "要開始，請編輯 src/App.js 並保存以重新加載。",
"part2": "使用上面的按鈕在英語和中文之間切換語言。"
},
"agreement": "同意書",
"agree": "我同意'",
"disagree":"我拒絕"
}
Here is the coding at MainPage.js
import React, { useState, useEffect, Component , Suspense, useCallback} from "react";
import Header from "../Resources/Components/Header";
import Footer from "../Resources/Components/Footer";
import { useTranslation, withTranslation, Trans } from 'react-i18next';
import {MainPageContext, useMainPageContext } from "../Resources/Hooks/mainPageContext";
import "./MainPage.css";
class LegacyWelcomeClass extends Component {
render() {
const { t } = this.props;
return <h2>{t('title')}</h2>;
}
}
const Welcome = withTranslation()(LegacyWelcomeClass);
const MainPage = () => {
const { t, i18n } = useTranslation();
const context = useMainPageContext();
const changeLanguage = useCallback((lng) => {
i18n.changeLanguage(lng);
}, [i18n]);
let language=[0,1];
const [introductionPage, setIntroductionPage] = useState(0);
console.log("language is", changeLanguage('en'))
//const [language, setLanguage]= useState(0);
//below is the script of the test description. 隨時可以加入新array做新language。
const renderLanguageSwitch = () => {
return [t('testStart'), t('testAgreement')];
};
const renderButtonSwitch = () => {
return [t('agree'), t('disagree')];
};
return (
<div className="MainPage">
<Trans i18nKey="title">
<h2>{t('title')}</h2>
</Trans>
<Header />
<div
style={{
width: "100%",
height: "100vh",
backgroundColor: "#F5821F",
margin: "0",
}}
>
{introductionPage === 0 && (
<button
className="testStartBox"
onClick={() => {
setIntroductionPage(1);
}}
>
t('agree'), t('disagree')
</button>
)}
{introductionPage !== 0 && (
<div>
<div
className="testDescriptionBox"
onClick={() => {
setIntroductionPage(introductionPage + 1);
}}
>
t('description')
</div>
<div className="testAgreement">
</div>
</div>
)}
<div
className="buttonWrapper"
style={{ display: introductionPage === 1 ? "" : "none" }}
>
<button onClick={() => {
setIntroductionPage(introductionPage + 1);
}}> t('description')</button>
<button onClick={() => {
setIntroductionPage(0);
}}>{t('agreement')}</button>
</div>
</div>{" "}
<Footer />
</div>
);
};
export default MainPage;
Here is the coding Header.jsx
import React , {useCallback}from "react";
import { useMainPageContext } from "../Hooks/mainPageContext";
import { useTranslation } from 'react-i18next';
import { Trans } from "react-i18next";
import i18n from '../../i18n'
export const LanguageContext = React.createContext();
const Header = () => {
const { t, i18n } = useTranslation();
const context = useMainPageContext();
const {
language,
onSetLanguage,
} = context;
const changeLanguage = useCallback((lng) => {
i18n.changeLanguage(lng);
}, [i18n]);
const toggle = lng => i18n.changeLanguage(lng);
if (this.props.event){
return (
<div className="header">
<h1
style={{
display: "flex",
flexFlow:"row",
alignItems:"center",
width: "calc(100% - 10%)",
height: "4vh",
backgroundColor: "white",
paddingTop:"0",
padding: "2.5%",
paddingLeft: "5%",
paddingRight: "5%",
justifyContent:"space-between"
}}
>
<div style={{display:"flex", color: "#F5821F",}}>
<img src={require("../Images/cmghLogo.png")} style={{width:"50%", height:"7.5%", marginTop:"0vh"}} alt="中心"/>
<div style={{ top: "0", margin: "0vh", marginLeft:"2vw", width:" 100%", fontSize:"3vw"}}>中心</div>
</div>
<div>
<header>
<button onClick={() => toggle(this.props.event)}>English/</button>
<button onClick={() => toggle(this.props.event)}>TW</button>
</header>
</div>
</h1>
</div>
);
}
}
export default Header;
Here is the coding of i18n.js
import { createInstance } from 'i18next';
import { initReactI18next } from 'react-i18next';
const i18n = createInstance({
fallbackLng: 'en',
debug: true,
interpolation: {
escapeValue: false, // not needed for react as it escapes by default
},
resources: {
en: {
translation: {
hello: 'Hello from other i18n instance',
},
},
tw: {
translation: {
hello: 'Hallo aus einer anderen i18n Instanz',
},
},
},
});
i18n.use(initReactI18next).init();
export default i18n;