Reactstrap: ux: tooltip should not show when click the button when use delay

Issue description

• components: tooltip
• reactstrap version 4.0.0
• import method not sure
• react version 16.2.0
• bootstrap version 5.0.0 beta 2

What is happening?

I am using delay to show tooltip after 2s. However, now when I click the button immediately, it also shows the tooltip.

It happens to both Tooltip and UncontrolledTooltip.

It is just a user experience issue, not really a bug.

Code

Live demo

  constructor(props) {
    super(props);

    this.state = {
      isTooltipOpen: false
    };
  }

  onToggleTooltip = () => {
    const { isTooltipOpen } = this.state;
    this.setState({ isTooltipOpen: !isTooltipOpen });
  };

  render() {
    const { isTooltipOpen } = this.state;

    return (
      <div>
        <button id="controlledTooltip">Controlled Tooltip</button>
        <button id="uncontrolledTooltip">Uncontrolled Tooltip</button>

        <Tooltip
          delay={{ show: 2000, hide: 0 }}
          isOpen={isTooltipOpen}
          placement="bottom"
          target="controlledTooltip"
          toggle={this.onToggleTooltip}
        >
          Discard draft
        </Tooltip>

        <UncontrolledTooltip
          placement="bottom"
          target="uncontrolledTooltip"
          delay={{ show: 2000, hide: 0 }}
        >
          Hello world!
        </UncontrolledTooltip>
      </div>
    );
  }