Ошибка Поппера-Реакта: referenceElement не существует для типа {}

Question

Я новичок в node.js, npm и webpack. Я пытаюсь использовать реактив-поппер для проекта. Я пытаюсь использовать следующий код, но я получаю сообщение об ошибке:

referenceElement не существует для типа {}

Ошибка для кода:

<Popper referenceElement={virtualReferenceElement}>

Я извиняюсь, если это основная ошибка, однако я не могу понять, что я делаю неправильно. Я скопировал пример кода со страницы пакета response-popper.

var React = require('react');
var ReactDOM = require('react-dom');
import { Popper } from 'react-popper';


class VirtualReference {
    getBoundingClientRect() {
        return {
            top: 10,
            left: 10,
            bottom: 20,
            right: 100,
            width: 90,
            height: 10,
        };
    }

    get clientWidth() {
        return this.getBoundingClientRect().width;
    }

    get clientHeight() {
        return this.getBoundingClientRect().height;
    }
}

// This is going to create a virtual reference element
// positioned 10px from top and left of the document
// 90px wide and 10px high
const virtualReferenceElement = new VirtualReference();

// This popper will be positioned relatively to the
// virtual reference element defined above
const Hello = () => (
    <Popper referenceElement={virtualReferenceElement}>
        {({ ref, style, placement, arrowProps }) => (
            <div ref={ref} style={style} data-placement={placement}>
                Popper element
        <div ref={arrowProps.ref} style={arrowProps.style} />
            </div>
        )}
    </Popper>
);

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