React18でRecoilを使いたい

Reactでアプリを作成しておりステータス管理にRecoilを使いたいです。
簡単なアプリを作ってみたのですが、index.tsxの14行目の<RecoilRoot>のとこりでエラーが発生してしまいました。
GitHubのこの記事（https://github.com/facebookexperimental/Recoil/issues/1717 ）などをみるとバグがあるっぽいのですが、React18でRecoilを使っているところもあるようなので使えるようにしたいと思っています。
どのようにすればReact18でRecoilが使えるようになりますか。

npmlistreact
1root@5e90b19430ee:/usr/src# npm list react
2src@ /usr/src
3+-- react-redux@8.1.2
4| +-- react-dom@18.2.0
5| | `-- react@18.2.0 deduped
6| +-- react@18.2.0
7| `-- use-sync-external-store@1.2.0
8|   `-- react@18.2.0 deduped
9+-- react-router-dom@6.16.0
10| +-- react-router@6.16.0
11| | `-- react@18.2.0 deduped
12| `-- react@18.2.0 deduped
13`-- recoil@0.7.7
14  `-- react@18.2.0 deduped

'RecoilRoot' を JSX コンポーネントとして使用することはできません。
  Its type 'FC<RecoilRootProps>' is not a valid JSX element type.
    型 'FunctionComponent<RecoilRootProps>' を型 '(props: any, deprecatedLegacyContext?: any) => ReactNode' に割り当てることはできません。
      型 'import("d:/ddrive/Docker/PhotoAlbum/react/node_modules/@types/react/index").ReactNode' を型 'React.ReactNode' に割り当てることはできません。
        型 'ReactElement<any, string | JSXElementConstructor<any>>' を型 'ReactNode' に割り当てることはできません。
          プロパティ 'children' は型 'ReactElement<any, string | JSXElementConstructor<any>>' にありませんが、型 'ReactPortal' では必須です。ts(2786)
index.d.ts(205, 9): 'children' はここで宣言されています。

index.tsx
1import React from 'react';
2import ReactDOM from 'react-dom/client';
3import './index.css';
4import MainApp from './MainApp';
5import reportWebVitals from './reportWebVitals';
6import { RecoilRoot } from 'recoil';
7
8
9const root = ReactDOM.createRoot(
10  document.getElementById('root') as HTMLElement
11);
12root.render(
13  <React.StrictMode>
14    <RecoilRoot> {/* RecoilRootでアプリケーション全体をラップ */}
15      <MainApp />
16    </RecoilRoot>
17  </React.StrictMode>
18);
19
20reportWebVitals();