I have a React webapp with Ant design component framework version 4.

I tried to use this example from Antd docs in my webapp: https://codesandbox.io/s/ymspt

But I don't get the same result when I use the code in my webapp. This is how it looks like in my app

import { MenuFoldOutlined, MenuUnfoldOutlined, UploadOutlined, UserOutlined, VideoCameraAddOutlined } from "@ant-design/icons";
import { Layout, Menu, Space } from "antd";
import { Content, Footer, Header } from "antd/lib/layout/layout";
import Sider from "antd/lib/layout/Sider";
import React, { useState } from "react";
import { logOut } from "../firebase";


function Lineups() {
    const [collapsed, setCollapsed] = useState(false);
    const [logoText, setLogoText] = useState("TEAMTAC");

    const toggle = () => {
        setCollapsed(!collapsed);
        collapsed ? setLogoText("TEAMTAC") : setLogoText("TT")
    };

    const signOutFirebase = async () => {
        await logOut();
    }

    return (
        <Layout style={{ minHeight: '100vh' }}>
            <Sider collapsible collapsed={collapsed} onCollapse={toggle}>
               <h2 style={{textAlign:"center", marginTop: 15}}>{logoText}</h2>
                <Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
                    <Menu.Item key="1" icon={<UserOutlined />}>
                        nav 1
                    </Menu.Item>
                    <Menu.Item key="2" icon={<VideoCameraAddOutlined />}>
                        nav 2
                    </Menu.Item>
                    <Menu.Item key="3" icon={<UploadOutlined />}>
                        nav 3
                    </Menu.Item>
                </Menu>
            </Sider>
            <Layout className="site-layout">
                <Header  style={{ padding: 5 }}>
                 Header
                </Header>
                <Content
                    style={{
                        margin: '24px 16px',
                        padding: 24,
                        minHeight: 280,
                    }}
                >
                    Content
                </Content>
                <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>

            </Layout>
        </Layout>
    )
}

export default Lineups;

I dont have any extra css or whatever.

How come that I don't get the same result?