OverlayTrigger на пользовательском компоненте не работает

Я пытаюсь показать всплывающее окно, когда пользовательский компонент (кнопка) зависает:

class MyComponent extends React.PureComponent<MyComponentProperties>  {
    public render(): JSX.Element {
        const overlay: JSX.Element = (
            <Popover id={this.uuid}>
                <Popover.Content>
                    Hello world!
                </Popover.Content>
            </Popover>
        );

        return <OverlayTrigger trigger="hover" placement="auto" delay={{show : 700, hide : 0}} overlay={overlay}>
            <MyFancyButton ... />
        </OverlayTrigger >
    }
}

class MyFancyButton extends React.PureComponent<MyFancyButtonProperties> {
    public render(): JSX.Element {
        return <button ...>Hover me!</button>
    }
}

Popover не отображается. Однако это сработает, если я изменю возврат функции render из MyComponent на:

return <OverlayTrigger trigger="hover" placement="auto" delay={{show : 700, hide : 0}} overlay={overlay}>
    <button>Hover me!</button>
</OverlayTrigger >

Я проверил https://react-bootstrap.github.io/components/overlays/#overlay-trigger и говорит:

Обратите внимание, что запускающие компоненты должны иметь возможность принимать ссылку, поскольку будут пытаться ее добавить. Вы можете использовать forwardRef () для функциональных компонентов.

Я не знаю, как это сделать. Я попытался добавить свойство ref в MyFancyButtonProperties и переслать его на button, но это не сработало:

class MyFancyButton extends React.PureComponent<MyFancyButtonProperties> {
    public render(): JSX.Element {
        return <button ref={this.props.ref} ...>Hover me!</button>
    }
}

Мои версии:

• Реагировать 16.8.6
• React bootstrap 1.0.0-beta.14