使用ReactStrap时工具提示转换不起作用

我正在尝试使用reactstrap显示工具提示。工具提示显示正确,但没有淡入/淡出转换。使用检查员,我注意到 fade 不应用于工具提示 <div> :

我按照安装说明 https://www.npmjs.com/package/reactstrap#adding-bootstrap 将这些依赖项添加到 package.json 使用 yarn :

"bootstrap": "^4.1.1",
"react": "^16.7.0",
"react-dom": "^16.3.2",
"react-popper": "^1.3.2",
"react-transition-group": "^2.5.3",
"reactstrap": "^7.1.0",

这是从我的应用程序获取的工具提示用法的一个示例组件:

import React from 'react';
import nanoid from 'nanoid';
import {UncontrolledTooltip} from 'reactstrap';

export default class ExampleTooltip extends React.PureComponent {
    constructor(props) {
        super(props);
        this._id = `autogeneratedid-${nanoid()}`;
    }

    render() {
        return (
                <>
                    <span id={this._id}>Hover me!</span>
                    <UncontrolledTooltip target={this._id}>
                        My tooltip
                    </UncontrolledTooltip>
                </>
            );
    }
}

我把使用sass的引导包含在我的 index.js 文件:

import '../styles/style.scss';

在我的 style.scss :

@import 'bootstrap/scss/bootstrap.scss';

我错过什么了吗?

我在上创建了一个代码沙盒 https://codesandbox.io/s/01zm5k5w10

谢谢您。