Strange placement of data attr

[vjpr]

<div class="x__Wrapper-uexbah-0 jyzRWE">
<div class="x__AddButton-uexbah-2 hrepEa">
<button data-component="Foo">
<i class="fa fa-plus-circle">
</i>
</button>
</div>
</div>

  render() {
    return (
      <Wrapper>
        {this.renderKPIs()}
        <AddButton>
          <button onClick={this.addKpi}>
            <i className="fa fa-plus-circle" />
          </button>
        </AddButton>
      </Wrapper>
    )
  }
}

export default Foo

See how it added Foo on the button. I would expect Foo to be on the Wrapper.

I'd also expect AddButton to be on AddButton.