Issue with ConnectedRouter in typescript

[sunnyrajkotiyarazorpay]

Facing an issue with ConnectedRouter in typescript.
Here is my code

import React,{PropsWithChildren} from 'react'
import {Provider} from 'react-redux'
import {store,history} from './reducers'
import { ConnectedRouter } from 'connected-react-router'

import {
    HashRouter,
  } from "react-router-dom";

export default ({children}:PropsWithChildren<{}>) =>  (
    <Provider store={store}>
        <ConnectedRouter history={history}>
            <HashRouter>
                {children}
            </HashRouter>
        </ConnectedRouter>
    </Provider>
);

When I try to compile the typescript, I am getting

(alias) class ConnectedRouter<S = any>
import ConnectedRouter
JSX element class does not support attributes because it does not have a 'props' property.ts(2607)
'ConnectedRouter' cannot be used as a JSX component.
  Its instance type 'ConnectedRouter<any>' is not a valid JSX element.
    Type 'ConnectedRouter<any>' is missing the following properties from type 'ElementClass': render, context, setState, forceUpdate, and 3 more.ts(2786)

Here are the versions of react router and connected-react-router

"react-router-dom": "^5.2.0", "connected-react-router": "^6.8.0",

[iSunRise]

@sunnyrajkotiyarazorpay

import React from 'react'
import {Provider} from 'react-redux'
import {store,history} from './reducers'
import { ConnectedRouter } from 'connected-react-router'

import {
    HashRouter,
  } from "react-router-dom";

const App: React.FC = ({children}) =>  (
    <Provider store={store}>
        <ConnectedRouter history={history}>
            <HashRouter>
                {children}
            </HashRouter>
        </ConnectedRouter>
    </Provider>
);

export default App;