Reactjs: расфокусировка элемента кнопки с помощью .blur ()

У меня возникла небольшая проблема, когда я учился реагировать - я хотел бы расфокусировать (он же blur()) элемент DOM кнопки, но по какой-то причине это не совсем работает.

Я думаю, что проблема связана с использованием компонента Button responsestrap:

<Button className = {buttonClass} onClick = {this.handleCopyToClipboardClick} ref = {this.buttonBlurRef}>
  <div className = "d-flex justify-content-between">
    <span></span>
    <span>{ this.state.hasCopiedToClipboard ? 'Copied to clipboard!' : this.state.buttonText }</span>
    <span><FontAwesomeIcon icon = "copy" /></span>
  </div>
</Button>

Я привязываю ссылку на компонент? Думаю, поэтому не работает.

Работает функция onClick, которую я включил ниже. Я включил закомментированный код из вещей, которые я пробовал - все это нарушает функцию handleCopyToClipboardClick.

handleCopyToClipboardClick() {
  this.setState(state => ({
    hasCopiedToClipboard: !state.hasCopiedToClipboard
  }));

  // this.buttonBlurRef.current.blur(); <= This isn't working

  // this.buttonBlurRef.blur(); <= This isn't working either

  // this.refs.buttonBlurRef.current.blur(); <= Or this

  // this.refs.buttonBlurRef.blur(); <= Nor this... :'(

  setTimeout(
    function() {
      this.setState(state => ({
        hasCopiedToClipboard: !state.hasCopiedToClipboard
      }));
    }.bind(this),
    1500
  );
}

Вот и мой конструктор Component:

constructor(props) {
  super(props);
  this.buttonBlurRef = React.createRef();

  this.state = {
    hasCopiedToClipboard: false,
  };

  this.handleCopyToClipboardClick = this.handleCopyToClipboardClick.bind(this);
}

Любые советы о том, как я потенциально могу расфокусировать свой Bootstrap Button, были бы замечательными! :)