Hide Victory VictoryVoronoiContainer tooltip with externalEventMutations

Question

I want to hide the VictoryVoronoiContainer tooltip when pressing the 'clear tooltip' button with externalEventMutations on mobile devices. However, the mutation is not functioning as expected here is my code

import { VictoryBar, VictoryChart, VictoryGroup, VictoryTooltip, VictoryVoronoiContainer, VoronoiHelpers } from "victory";
import { Component, ReactNode } from "react";
import { debounce } from "lodash";

const data1 = [
  { x: 10, y: 10 },
  { x: 1, y: 1 },
  { x: 2, y: 1 }
]

const data2 = [
  { x: 10, y: 10 }
]

const App = () => {
  return (
    <div className="w-full h-full">
      <Chart />
    </div>
  );
};

class Chart extends Component<{}, { externalMutations: any }>  {
  constructor(props: any) {
    super(props)
    this.state = {
      externalMutations: undefined,
    }
  }
  isShowTooltip: boolean = false

  clearTooltip() {
    this.setState({
      externalMutations: [
        {
          eventKey: "all",
          target: ["parent"],
          mutation: (props: any) => {
            return { active: false }
          },
          callback: this.removeMutation.bind(this),
        },
      ],
    })
  }

  removeMutation() {
    this.setState({
      externalMutations: undefined,
    })
  }


  setTooltipShow(isShow: boolean) {
    const _setTooltipShow = debounce((isShow) => {
      this.isShowTooltip = isShow
    }, 0)
    _setTooltipShow(isShow)
  }


  render(): ReactNode {
    return <>
      <button onClick={this.clearTooltip.bind(this)}>clear tooltip</button>
      <VictoryChart
        height={200}
        width={400}
        containerComponent={
          <VictoryVoronoiContainer
            labels={({ datum }) => {
              return `${datum.x}\n`
            }}
            labelComponent={
              <VictoryTooltip
                text={"Tooltip"}
                constrainToVisibleArea
                pointerLength={1}
              />
            }
          />
        }
        events={[
          {
            target: "parent",
            eventHandlers: {
              onTouchStart: () => {
                if (this.isShowTooltip) {
                  this.setTooltipShow(false)
                } else {
                  this.setTooltipShow(true)
                }
                return {}
              },
              onTouchMove: () => {
                return {}
              },
              onTouchEnd: (evt, target) => {
                if (this.isShowTooltip) {
                  return VoronoiHelpers.onMouseLeave(evt, target)
                }
                return VoronoiHelpers.onMouseMove(evt, target)
              },
              onMouseLeave: (evt: any, targetProps: any) => { },
              onTouchCancel: (evt: any, targetProps: any) => {
                return VoronoiHelpers.onMouseLeave(evt, targetProps)
              },
            },
          },
        ]}
        externalEventMutations={this.state.externalMutations}
      >
        <VictoryGroup offset={12}>
          <VictoryBar
            name={`bar`}
            data={data1}
            style={{
              data: { fill: 'red' },
            }}
            barWidth={12}
            cornerRadius={6}
          />
          <VictoryBar
            name={`bar2`}
            data={data2}
            style={{
              data: { fill: 'yellow' },
            }}
            cornerRadius={6}
            barWidth={12}
          />
        </VictoryGroup>
      </VictoryChart></>
  }
}

export default App;

Here is my code using VictoryChart, which wraps VictoryBar components within VictoryGroup. I have implemented a tooltip using VictoryVoronoiContainer and added event handlers in VictoryChart

(https://stackoverflow.com)

enter image description here