'X' cannot be used as a JSX component. Its return type 'Element[]' is not a valid JSX element

I am rending two simple joke cards in TypeScript and the cards do show up in my browser but I also get this error:'Jokes' cannot be used as a JSX component.Its return type 'Element[]' is not a valid JSX element.Type 'Element[]' is missing the following properties from type 'ReactElement<any, any>': type, props, key

I am new to TypeScript and cannot figure out for the life of me what the problem is. I have tried adding <></> between the <Jokes /> in my App.tsx file but that doesn't work. I can't figure it out and was hoping someone could guide me in fixing this.

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'));

I have tried adding <></> between the <Jokes /> in my App.tsx file but that doesn't work. I can't figure it out and was hoping someone could guide me in fixing this.