Overlapping issue used semantic ui react

Question

I am using sidebar from semantic ui react when click Home then routing to next component but issue is the components coming behind the sidebar I want beside of sidebar and i didn't want to use css (left margin ). Code is here: Sidebar.jsx

import React from 'react'
import {  Menu, Sidebar } from 'semantic-ui-react'
import { Link } from 'react-router-dom'

const SidebarExampleVisible = () => {
  

return(
  
  
    <Sidebar
      as={Menu}
      vertical
      visible
      width='thin'
    >
      <Menu.Item as='a'>
      <Link to='/components/Home'>Home</Link>
      </Menu.Item>
      <Menu.Item as='a'>
        Games
      </Menu.Item>
      <Menu.Item as='a'>
      About
      </Menu.Item>
    </Sidebar>

   
 
)
}

export default SidebarExampleVisible

Home.jsx

import React from 'react'
import { Tab } from 'semantic-ui-react'

const panes = [
  {
    menuItem: 'Tab 1',
    render: () => <Tab.Pane attached={false}>Tab 1 Content</Tab.Pane>,
  },
  {
    menuItem: 'Tab 2',
    render: () => <Tab.Pane attached={false}>Tab 2 Content</Tab.Pane>,
  },
  {
    menuItem: 'Tab 3',
    render: () => <Tab.Pane attached={false}>Tab 3 Content</Tab.Pane>,
  },
]

const TabExamplePointing = () => <Tab menu={{ pointing: true }} panes={panes} />

export default TabExamplePointing

SandBox link: https://codesandbox.io/s/optimistic-boyd-pecgne?file=/src/Sidebar/Sidebar.jsx:0-460

In sandbox when click home menu then tab will open but tab coming behind the sidebar but i want beside of sidebar