如何使用react-i18next <Trans>组件显示数组元素？

npm install react-i18next

import React from 'react';
import { useTranslation } from 'react-i18next';
import translations from './translations.json'; // 假设这是包含翻译内容的JSON文件

const Home = () => {
  const { t } = useTranslation();

  return (
    <div>
      <h1>{t('title')}</h1>
      <ul>
        {t('list', { returnObjects: true }).map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
};

export default Home;

{
  "en": {
    "title": "My App",
    "list": ["Item 1", "Item 2", "Item 3"]
  },
  "zh": {
    "title": "我的应用",
    "list": ["项目1", "项目2", "项目3"]
  }
}

import React from 'react';
import ReactDOM from 'react-dom';
import { I18nextProvider } from 'react-i18next';
import i18n from 'i18next';
import translations from './translations.json';

i18n.init({
  interpolation: { escapeValue: false },
  lng: 'en',
  resources: translations
});

ReactDOM.render(
  <I18nextProvider i18n={i18n}>
    <App />
  </I18nextProvider>,
  document.getElementById('root')
);