Почему я получаю неправильный макет при использовании компонента «Сетка» в 'semantic-ui-react'?

В моем проекте есть следующая иерархия

project
- node_modules
- public
- src
  - components
    - CustomGrid.js
  - App.js

а также другие стандартные файлы в любом проекте Реагировать: package.json, README, package-lock.json, .gitignore.

CustomGrid.js содержит следующий код

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

class CustomGrid extends React.Component {
  render() {
    return (
      <Grid columns = {2}>
        <Grid.Column>
          <p>Hello World</p>
        </Grid.Column>
        <Grid.Column>
          <p>Hello World</p>
        </Grid.Column>
      </Grid>
    );
  }
}

export default CustomGrid;

App.js содержит следующий код

import React, { Component } from 'react';
import CustomGrid from './components/CustomGrid';

class App extends Component {
  render() {
    return (
      <CustomGrid />
    );
  }
}

export default App;

Результат, который я получаю, выглядит следующим образом

Однако, исходя из моего кода и спецификации здесь, два оператора Hello World должны быть рядом. Что я делаю неправильно?