reactjs - 可視性コンポーネントの小道具が起動しない - セマンティック UI React

Question

Visibility コンポーネントを使用して、Semantic UI React アプリで無限スクロールを機能させようとしています。

私は Semantic UI React ページでこの例に従っています: https://react.semantic-ui.com/behaviors/visibility#callback-frequency-example。次のようにコードを簡略化しました。

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>
        );
    }
}

私の単純な React アプリでは、どのconsole.logステートメントも起動していません。ただし、セマンティック UI React Web ページでコードを操作すると、console.logステートメントは期待どおりに起動されます。

私は何が欠けていますか？

index.js編集:ファイル内で VisibilityExample コンポーネントをレンダリングしている場所は次のとおりです。

/* global document */

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

import VisibilityExample from './VisibilityExample';

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