TS2786: 'PersistGate' cannot be used as a JSX component. Its instance type 'PersistGate' is not a valid JSX element

I am using react-redux with redux-persist in a react js application with TypeScript.

store.jsx

import {applyMiddleware, createStore} from 'redux';
import thunkMiddleware from 'redux-thunk';
import reducer from '../reducers';
import {composeWithDevTools} from "@redux-devtools/extension";
import {persistReducer, persistStore} from 'redux-persist'
import storage from 'redux-persist/lib/storage'

const persistConfig = {
    key: 'root',
    storage,
    whitelist: ['authState']

}
const persistedReducer = persistReducer(persistConfig, reducer)

const store = createStore(
    persistedReducer,
    composeWithDevTools(applyMiddleware(
        thunkMiddleware,
    ))
);


export const persistor =persistStore(store);
export default store;

index.tsx

import App from './App';
import ReactDOM from 'react-dom';
import './utils/chart';
import {BrowserRouter} from 'react-router-dom';
import 'nprogress/nprogress.css';
import {SidebarProvider} from './contexts/SidebarContext';
import {Provider} from "react-redux";
import React from 'react';
import store, {persistor} from '../src/services/store/ConfigureStore';
import {PersistGate}  from 'redux-persist/lib/integration/react';

//---------------------------------------------



ReactDOM.render(
    <Provider store={store}>
        <PersistGate loading={null}  persistor={persistor}>
        <SidebarProvider>
            <BrowserRouter>
                     <App/>
            </BrowserRouter>
        </SidebarProvider>
        </PersistGate>
    </Provider> ,
        document.getElementById('root')
);

As you can see in the picture below This PersistGate Showing an Error Like this https://i.stack.imgur.com/ABnOH.jpg