cannot be used as a JSX component. のコンパイルエラーが発生してしまう

Question

実現したいこと

cannot be used as a JSX component. のコンパイルエラーを解消したい

前提

ViteでReactをつかったコーディング環境を作成しており、本番用のビルドコマンド実行時にコンパイルエラーが発生してしまう。（開発用のビルドコマンドは問題なし）

発生している問題・エラーメッセージ

 'Context.Provider' cannot be used as a JSX component.
  Its return type 'ReactElement<any, string | JSXElementConstructor<any>> | null' is not a valid JSX element.
    Type 'ReactElement<any, string | JSXElementConstructor<any>>' is missing the following properties from type 'Element': ref, scopeId, children, component, and 10 more.

'RouterProvider' cannot be used as a JSX component.
  Its return type 'ReactElement<any, string | JSXElementConstructor<any>>' is not a valid JSX element.

該当のソースコード

import React, { createContext, useState, useContext } from 'react';
import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import Home from './pages/Home';

const Context = createContext<{message: string} | null>(null);

const routes = createBrowserRouter([
  {
    path: '/',
    element: <Home />,
  },
]);

const App = (): JSX.Element => {
  return (
    <>
      <Context.Provider value={{message: 'Hello World'}}>
        <RouterProvider router={routes} />
      </Context.Provider>
    </>
  )
}

export default App;

補足情報（FW/ツールのバージョンなど）

@types/react: ^18.2.13,
@types/react-dom: ^18.2.6,
react: ^18.2.0,
react-dom: ^18.2.0,
react-router-dom: ^6.13.0,

各種パッケージも最新版に更新するもエラーは解消されず、、どなたか知恵をお借りいただけますと幸いです

Answer 1

自己解決しました。
TypeScriptのバージョンを更新することでエラーも解消され、ビルドできるようになりました。

-    "typescript": "^4.9.3",
+    "typescript": "^5.1.3",