Why am I getting incorrect layout when using the "Grid" component of 'semantic-ui-react'?

I have the following hierarchy in my project

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

as well as the other standard files in any React project: package.json, README, package-lock.json, .gitignore.

CustomGrid.js contains the following code

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 contains the following code

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

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

export default App;

The output I get is as follows

However, based on my code and the specification here, the two 'Hello World' statements should be side-by-side. What am I doing wrong?