React tooltip, id is not in the dom

Question

I'm using Tooltips (https://github.com/souporserious/react-popper) but I have a problem. I have this code:

const targetId = `MenuOption`;

return (
  <React.Fragment>
    <div className="report-panel1-actions">
        {!polygon && (<button onClick={this.handleFinish} disabled={disabledButton} id={targetId}>
          <FormattedMessage id="reports.steps.step3.generateReport" />
          <Tooltip className="mg-boostrap-tooltip" placement="right" isOpen={this.state.tooltipOpen} target={targetId} toggle={this.toggleTooltip} delay={{ show: 50, hide: 0 }}>
            Las herramientas están desactivadas
          </Tooltip>
        </button>)}
    </div>

I'm getting the error:

Uncaught Error: The target 'MenuOption' could not be identified in the dom, tip: check spelling

Why is not identifying in the dom? I have used this tooltip component in other components but without problem.

EDIT: In this example works ok:

const targetId = `MenuOption`;
return (
  <ul className="menu">
    <li>
      <div className="sidebar-option">
        <a id={targetId}>
          <img alt={title} src={src} />
        </a>
      </div>
      <Tooltip className="mg-boostrap-tooltip" placement="right" isOpen={this.state.tooltipOpen} target={targetId} toggle={this.toggleTooltip} delay={{ show: 50, hide: 0 }}>
        Some text
      </Tooltip>
    </li>
  </ul>
);