I am using Hint from React-Vis but even though I pass on my Hint the value that it should plot again, it goes way out of scope. How can I make sure this is on top of the vertical bar height?

Code Link here.

or full code here :

export default class Example extends React.Component {
  state = {
    hintValue: ""
  };

  _onNearestX = (value) => {
    this.setState({ hintValue: value });
  };

  render() {
    return (
      <div>
        <XYPlot width={300} height={300} stackBy="y" xType="ordinal">
          <VerticalGridLines />
          <HorizontalGridLines />
          <XAxis />
          <YAxis />
          <VerticalBarSeries
            cluster="Q2"
            color="red"
            data={[
              { x: 1, y: 5 },
              { x: 2, y: 15 }
            ]}
            onNearestXY={this._onNearestX}
          />
          <VerticalBarSeries
            cluster="Q2"
            color="grey"
            data={[
              { x: 1, y: 2 },
              { x: 2, y: 11 }
            ]}
            onNearestXY={this._onNearestX}
          />
          <VerticalBarSeries
            cluster="Q1"
            color="green"
            data={[
              { x: 1, y: 8 },
              { x: 2, y: 16 }
            ]}
            onNearestXY={this._onNearestX}
          />
          <VerticalBarSeries
            cluster="Q1"
            color="lightgreen"
            data={[
              { x: 1, y: 3 },
              { x: 2, y: 12 }
            ]}
            onNearestXY={this._onNearestX}
          />
          <VerticalBarSeries
            cluster="Q1"
            color="yellow"
            data={[
              { x: 1, y: 1 },
              { x: 2, y: 1 }
            ]}
            onValueClick={(datapoint, event) => {
              console.log(datapoint, event); // Some SVG element
            }}
            onNearestXY={this._onNearestX}
          />
          {this.state.hintValue !== "" && (
            <Hint value={this.state.hintValue}>
              <div className="hint">
                <p>X: {this.state.hintValue.x}</p>
                <p>Y: {this.state.hintValue.y}</p>
              </div>
            </Hint>
          )}
        </XYPlot>
      </div>
    );
  }
}

const rootElement = document.querySelector("#root");
if (rootElement) {
  render(<Example />, rootElement);
}