Disable click events on VictoryScatter while scrolling in a React Native app

I am working on a data visualization app in React Native using the Victory Chart library. The app uses VictoryScatter and VictoryVoronoiContainer to implement a clickable scatter point graph, where tooltips appear above the scatter points when clicked. I want to improve the user experience by disabling these click events on the VictoryScatter component while the user is scrolling to prevent accidental activation of a scatter point.

The parent component for the screen is MoodTrendScreen.js, and the child component is MoodChart.js. MoodTrendScreen.js has a scrollable list of MoodCharts. I tried using scrollBeginDrag and scrollEndDrag callbacks on the ScrollView component to track whether the user is scrolling, storing it as a boolean flag (state component called isScrolling) in the parent component, and passing it as a prop to the children. Then, I used the isScrolling prop to set pointerEvents to 'none'. However, this approach did not work. How can I disable the scatter points from being clickable while the user is scrolling?

function MoodTrendScreen() {
  const [moodData, setMoodData] = useState({});

  ...

  return (
    <ScrollView>
      <MoodChart
        csvColumn={'happiness'}
        moodData={moodData}
      />
      <MoodChart
        csvColumn={'anxiety'}
        moodData={moodData}
      />

      ...

    </ScrollView>
  );
}

export default MoodTrendScreen;

const MoodChart = (props) => {
  const filteredChartData = ...

  const renderDataPoints = () => {
    const pointRadius = 4;

    return (
      <VictoryScatter
        data={filteredChartData}
        dataComponent={<ClickableScatterPoint pointRadius={pointRadius} />}
      />
    );
  };

  const CustomVoronoiContainer = <VictoryVoronoiContainer voronoiBlacklist={['mood', 'mood-trend']} radius={20} />;

  const renderLineChart = () => {
    return (
      <>
        <View>
          <VictoryChart
            height={250}
            scale={ {x: "time", y: "linear"} }
            containerComponent={CustomVoronoiContainer}
          >
            <VictoryLine
              name='mood'
              data={filteredChartData}
              domain={{ y: [0, 11] }}
              interpolation={"monotoneX"}
            />
            {renderDataPoints()}
          </VictoryChart>
        </View>
      </>
    );
  };

  return (
    <View style={styles.rootView} onLayout={onLayout}>
      <Text style={styles.chartHeader}>{chartTitle}</Text>
      {renderLineChart()}
    </View>
  );
};

export default MoodChart;

enter image description here