Provider' cannot be used as a JSX component

Question

I've recently updated my react-router-dom to v6. The new version is very strict about the types used. When I use a redux provider in my code I get the following error message:

TS2786: 'Provider' cannot be used as a JSX component.

But it is fine for other providers:

root.render(
  <FirebaseAppProvider firebaseConfig={firebase}>
    <Provider store={store}>
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<div>hello</div>} />
        </Routes>
      </BrowserRouter>
    </Provider>
  </FirebaseAppProvider>,
);

Do you have any solution rather than ts-ignore?

Answer 1

This seems to occur recently when you have multiple versions of @types/react installed through dependencies.

Some workarounds can be found here: https://github.com/facebook/react/issues/24304#issuecomment-1094565891