我在TypeScript中渲染两个简单的笑话卡，卡确实显示在我的浏览器中，但我也得到这个错误：* “Jokes”不能用作JSX组件。其返回类型“Element[]”不是有效的JSX元素。类型“Element[]"缺少类型”ReactElement〈any，any〉“的以下属性：类型、 prop 、密钥*
我是TypeScript新手，一辈子都搞不清楚问题是什么。我曾尝试在App.tsx文件的<Jokes />之间添加<></>，但没有效果。我搞不清楚，希望有人能指导我解决这个问题。
Jokes.tsx

import { jokeList, JokesPunchlines } from './jokeList';
import './App.css';

function Jokes() {
    return (
        jokeList.map((joking: JokesPunchlines) => {
            return (
                <div className="box">
                    <strong>{joking.setup}</strong>
                    <br />
                    <p>{joking.punchline}</p>
                </div>
            );
        })
    );
}

export default Jokes;

Joke List

export interface JokesPunchlines {
    id: number,
    setup: string,
    punchline: string,
}

export const jokeList: JokesPunchlines[] = [
    {
        id: 1,
        setup: "What's the best thing about a Boolean?",
        punchline: "Even if you're wrong, you're only off by a bit"
    },
    {
        id: 2,
        setup: "Why do programmers wear glasses?",
        punchline: "Because they need to C#"
    }
];

App.tsx

import './App.css';
import Jokes from './Jokes';

function App() {
  return (
    <Jokes />
  );
}

export default App;

index.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

我试过在我的App.tsx文件中的<Jokes />之间添加<></>，但是不起作用。我想不通，希望有人能指导我解决这个问题。