Invariant failed: You should not use <withRouter(Sidebar) /> outside a <Router>

I am trying to create reactjs component and using in another tsx file but I get below error Invariant failed: You should not use outside a

My code is as below and My codesandbox https://codesandbox.io/s/zen-sound-ztbjl

class Sidebar extends Component<ISidebarProps & RouteComponentProps<{}>> {
    constructor(props: ISidebarProps & RouteComponentProps<{}>) {
        super(props)
        this.state = {}
    }

    componentDidMount = (): void => {
        this.initMenu()
    }

    componentDidUpdate = (prevProps: any): void => {
        if (this.props.type !== prevProps.type) {
            this.initMenu()
        }
    }

    initMenu = (): void => {
        const mm = new MetisMenu('#side-menu')

        let matchingMenuItem = null
        const ul = document.getElementById('side-menu')
        const items = ul.getElementsByTagName('a')
        for (let i = 0; i < items.length; ++i) {
            if (this.props.location.pathname === items[i].pathname) {
                matchingMenuItem = items[i]
                break
            }
        }
        if (matchingMenuItem) {
            this.activateParentDropdown(matchingMenuItem)
        }
    }

    activateParentDropdown = (item: any) => {
        item.classList.add('active')
        const parent = item.parentElement

        if (parent) {
            parent.classList.add('mm-active')
            const parent2 = parent.parentElement

            if (parent2) {
                parent2.classList.add('mm-show')

                const parent3 = parent2.parentElement

                if (parent3) {
                    parent3.classList.add('mm-active') // li
                    parent3.childNodes[0].classList.add('mm-active') // a
                    const parent4 = parent3.parentElement
                    if (parent4) {
                        parent4.classList.add('mm-active')
                    }
                }
            }
            return false
        }
        return false
    }

    render() {
        return (
            <React.Fragment>
                <div className='vertical-menu'>
                    <div data-simplebar className='h-100'>
                        {this.props.type !== 'condensed' ? (
                            // <Scrollbars style={{ maxHeight: '100%' }}>
                            <SidebarContent />
                        ) : (
                            // </Scrollbars>
                            <SidebarContent />
                        )}
                    </div>
                </div>
            </React.Fragment>
        )
    }
}

can somebody tell me what is the issue in my code