Ant Design does not work in react js project

import React from 'react';
import styled from "styled-components";
import {Col, Row} from "antd";

const TitleBig = styled.div`
  font-family: "Bebas Neue Pro";
  font-size: 20px;
`;

const TitleSmall = styled.div`
  font-family: "Bebas Neue Pro";
  font-size: 15px;
`;

const BigContents = styled.div`
  font-family: "Bebas Neue Pro";
  font-size: 17px;
`;

const SmallContents = styled.div`
  font-family: "Bebas Neue Pro";
  font-size: 12px;
`;

const DashBoard = () => {
    return (
        <Row gutter={[32, 32]}>
            <Col xs={24} md={12} xl={8}>
                <TitleBig>Hello</TitleBig>
            </Col>
            <Col xs={24} md={12} xl={8}>
                <TitleSmall>World</TitleSmall>
            </Col>
            <Col xs={24} md={12} xl={8}>
                <BigContents>Hello</BigContents>
            </Col>
            <Col xs={24} md={12} xl={8}>
                <SmallContents>World</SmallContents>
            </Col>
        </Row>
    );
};

export default DashBoard;

in this code.. Ant Design Row, Col Component does not work..

my first time to use ant design.. I don't know how to figure it out..

I add result screen!

And I hope Hello World is in one line!

I'm really appreciated for your kind help! Thank you