How to make a dropdown menu using semantic ui?

Question

React

Hello!
Please tell me how to make a dropdown menu that will open down and not sideways using semantic ui (react). Below is the code of what we managed to do, but it works with glitches and is not quite what you need.

import React from 'react'
import {
    Checkbox,
    Icon,
    Menu,
    Dropdown,
    Sidebar,
} from 'semantic-ui-react'

const LeftSidebar = () => {
    const [visible, setVisible] = React.useState(false)

    return (
        <div>
            <Checkbox
                checked={visible}
                label={{ children: <code>visible</code> }}
                onChange={(e, data) => setVisible(data.checked)}
            />
            <Sidebar
                as={Menu}
                animation='overlay'
                inverted
                onHide={() => setVisible(false)}
                vertical
                visible={visible}

            >
                <Dropdown item text='Display Options'>
                    <Dropdown.Menu scrolling >
                        <Dropdown.Header>Text Size</Dropdown.Header>
                        <Dropdown.Item>Small</Dropdown.Item>
                        <Dropdown.Item>Medium</Dropdown.Item>
                        <Dropdown.Item>Large</Dropdown.Item>
                    </Dropdown.Menu>
                </Dropdown>
                <Menu.Item as='a'>
                    <Icon name='home' />
                    Home
                </Menu.Item>
                <Menu.Item as='a'>
                    <Icon name='gamepad' />
                    Games
                </Menu.Item>
                <Menu.Item as='a'>
                    <Icon name='camera' />
                    Channels
                </Menu.Item>
            </Sidebar>
        </div>
    )
}

export default LeftSidebar

As an example of what to do here is emilus.themenate.net/app/docs/documentation/introd...
Sidebar on the left.