Click Event conflict when having combination of bar graph and VictoryLine/VictoryScatter on the same Victory Chart

Question

While trying to achieve combination of bar chart and line chart with secondary axis I am facing issue in click event of bar chart as I put it as VictoryScatter over VictoryBar.

Below is my code to achieve above chart. Where I am facing problem to get click event of bar graph. What changes I need to do to handle click event smoothly? I am attaching video also to have a better idea.

<VictoryChart
domainPadding={{x: 0}}
domain={{y: [0, props.maxY]}}
height={300}
width={props.data.length * 60}>
<VictoryGroup
offset={18}
events={eventHandler}
style={{position: 'absolute'}}
colorScale={[colors.secondary, colors.primary_dark]}>
<VictoryBar
barWidth={15}
data={data}
y={d => d.P_B}
animate={animation}
events={[{target: 'data', eventHandlers: {onPressIn: handleBarClick}}]}
cornerRadius={{top: cornerRadius}}
/>
<VictoryBar
barWidth={15}
data={data}
animate={animation}
y={d => d.ACTUAL}
events={[{target: 'data', eventHandlers: {onPressIn: handleBarClick}}]}
cornerRadius={{top: cornerRadius}}
/>


<VictoryLine
data={data}
y={d => d.dev + 200}
style={{
data: {stroke: colors.darkGrey, strokeWidth: 3},
}}
nativeID="animatedLine"
/>
<VictoryScatter
data={data}
y={d => d.dev + 200}
size={5}
events={devEventHandler}
style={{
data: {fill: colors.darkGrey},
}}
/>


<VictoryLine
data={data}
y={d => d.LY + 200}
style={{
data: {strokeWidth: 3},
}}
nativeID="animatedLine"
/>
<VictoryScatter
data={data}
size={5}
y={d => d.LY + 200}
events={LYEventHandler}
style={{data: {fill: colors.tertiary}}}
/>

<VictoryAxis
tickFormat={(t, i) => {
return truncateString(t);
}}
style={{
axis: {stroke: colors.transparent},
tickLabels: {
fill: colors.grey,
fontSize: 12,
fontFamily: fonts.regular,
},
}}
/>
</VictoryChart>

The video