Visibility Component props not firing - Semantic UI React

I'm trying to get infinite scroll working on my Semantic UI React app, using the Visibility Component.

I've been following this example on the Semantic UI React page: https://react.semantic-ui.com/behaviors/visibility#callback-frequency-example. I've simplified the code as follows:

import React, { Component } from 'react';
import { Visibility } from 'semantic-ui-react';

export default class VisibilityExample extends Component {
    render() {
        return (
            <Visibility
                continuous={false}
                once={false}
                onTopVisible={() => console.log('test')}
                onTopPassed={() => console.log('test')}
                onBottomVisible={() => console.log('test')}
                onBottomPassed={() => console.log('test')}
                onTopVisibleReverse={() => console.log('test')}
                onTopPassedReverse={() => console.log('test')}
                onBottomVisibleReverse={() => console.log('test')}
                onBottomPassedReverse={() => console.log('test')}
                onPassing={() => console.log('test')}
                onPassingReverse={() => console.log('test')}
                onOnScreen={() => console.log('test')}
                onOffScreen={() => console.log('test')}
            >
                <div>Hello</div>
            </Visibility>
        );
    }
}

In my simple React App, none of the console.log statements are firing. However, when I manipulate the code on the Semantic UI React webpage, the console.log statements are fired as expected.

What am I missing?

Edit: Here is where I'm rendering the VisibilityExample component, in an index.js file:

/* global document */

import React from 'react';
import ReactDOM from 'react-dom';

import VisibilityExample from './VisibilityExample';

ReactDOM.render(
    <VisibilityExample />,
    document.getElementById('root')
);