Компонент React Semantic UI не отображается должным образом

Я использовал create-react-app для инициализации своего приложения. Затем я сделал npm install semantic-ui-react --save, чтобы установить пакет.

Я хочу создать этот Grid пример из https://react.semantic-ui.com/collections/grid#grid-example-divided-number:

Я создал файл с именем Grid.js:

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

const GridExample = () => (
  <Grid columns={3} divided>
    <Grid.Row>
      <Grid.Column>
        <p>Lorem Ipsum</p>
      </Grid.Column>
      <Grid.Column>
        <p>Lorem Ipsum</p>
      </Grid.Column>
      <Grid.Column>
        <p>Lorem Ipsum</p>
      </Grid.Column>
    </Grid.Row>

    <Grid.Row>
      <Grid.Column>
        <p>Lorem Ipsum</p>
      </Grid.Column>
      <Grid.Column>
        <p>Lorem Ipsum</p>
      </Grid.Column>
      <Grid.Column>
        <p>Lorem Ipsum</p>
      </Grid.Column>
    </Grid.Row>
  </Grid>
)

export default GridExample

Затем в App.js я импортировал GridExample:

import React, { Component } from 'react';
import GridExample from './Grid'
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React</h2>
        </div>

        <GridExample />

      </div>
    );
  }
}
export default App;

Однако, когда веб-страница загружается, элементы <p> накладываются друг на друга - как будто 6X1 вместо предполагаемых 2X3

Почему Grid не отображается должным образом?