Tengo una aplicación web React con Ant design framework framework versión 4.

Traté de usar este ejemplo de Antd docs en mi aplicación web: https://codesandbox.io/s/ymspt

Pero no obtengo el mismo resultado cuando uso el código en mi aplicación web. Así es como se ve en mi aplicación

 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;

No tengo ningún css extra o lo que sea.

¿Cómo es que no obtengo el mismo resultado?