How to use the plottable.Interactions.Pointer function in plottable

setTimeout(() => {
      const clickInteraction = new Interactions.Click().onClick(this.onClick);
      clickInteraction.attachTo(plot);
      plot.onDetach(clickInteraction.detachFrom);

      const hoverInteraction = new Interactions.Pointer()
        .onPointerEnter(point => {
          const entity = this.getEntityAtPoint(point);
          if (entity && entity.datum.data.parentId !== this.rootNode.id) {
            this.setState({ showNavController: true });
          }
        })
        .onPointerMove(point => {
          if (!this.state.showNavController) {
            const entity = this.getEntityAtPoint(point);
            if (entity && entity.datum.data.parentId !== this.rootNode.id) {
              this.setState({ showNavController: true });
            }
          }
        })
        .onPointerExit(({ x, y }) => {
          if (x <= 0 || x >= this.props.width || y <= 0 || y >= this.props.height) { // is cursor out of bounds?

export const showLabelsOnHover = (plot: BarPlot | LinePlot, labelConfig: Partial) => {
  const interaction = new Interactions.Pointer()
    .onPointerExit(() => resetPlot(plot))
    .onPointerMove(point => {
      resetPlot(plot);
      const entities = plot.entitiesAt(point);
      if (entities && entities.length) {
        createCustomLabels(plot, entities, labelConfig);
      }
    });

  interaction.attachTo(plot);
  plot.onDetach(interaction.detachFrom);
};