Alguns erros.

Estou recebendo diversos erros e não sei como resolver.

No arquivo app.tsx

import React from 'react';

function App() {
  return (
    <div className="App"> /*  [ts] Cannot use JSX unless the '--jsx' flag is provided. (JSX attribute) className: string*/
      Hello World
    </div>
  );
}

export default App;

No index.tsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App'; /* ERRO -> [ts] Module './App' was resolved to 'c:/Users/2120478300031/Desktop/React - escrevendo com TypeScript/alura-studies/src/App.tsx', but '--jsx' is not set. */

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode> /* ERRO -> [ts] Cannot use JSX unless the '--jsx' flag is provided.
const React.StrictMode: React.ExoticComponent<{
    children?: any;
}>*/
    <App /> /* ERRO -> [ts] Cannot use JSX unless the '--jsx' flag is provided. import App*/
  </React.StrictMode>
);

E no arquivo *tsconfig.json *

{ /* ERRO -> [ts] Argument for '--jsx' option must be: 'preserve', 'react-native', 'react'.
JSON schema for the TypeScript compiler's configuration file */
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
}