Handling presses outside bars

[klaudia-manual]

Hi, I'm trying to implement a tappable bar chart, but having some issues.

Desired behaviour:

1. Render bar chart with average weekly step information view on top
2. When user taps a bar, the information view changes to show steps on that specific day (essentially select a bar)
3. When user taps the bar again OR taps outside of any bar, information view should return to the default state (deselect a bar)
4. When user taps another bar, when the first bar is selected, we should just switch selection to the new bar.

My solution:

<Box
        padding="x5"
        backgroundColor="surfaceWhite"
        borderRadius={16}
        style={wrapperStyle.wrapper}
        onTouchEnd={() => {
           if (selectedBarItem) {
             console.log('deselecting from touch end');
             setSelectedBarItem(null);
           }
         }}
      >
           <BarChart
                  height={200}
                  data={chartEntries}
                  barWidth={barWidth}
                  spacing={barSpacing}
                  maxValue={topYValue}
                  hideYAxisText
                  showReferenceLine1={currentGoal > 0}
                  referenceLine1Config={{
                    dashWidth: 1,
                    dashGap: 3,
                    type: 'dashed',
                    color: theme.colors.textxDark,
                    labelText: 'Goal',
                    labelTextStyle: {
                      fontSize: 12,
                      color: theme.colors.textxDark,
                      lineHeight: 20,
                    },
                  }}
                  referenceLine1Position={currentGoal}
                  xAxisLabelTextStyle={{
                    fontSize: 10,
                    color: theme.colors.textxDark,
                    width: 30,
                  }}
                  frontColor={theme.colors.surfaceWhite}
                  gradientColor={theme.colors.actionLight}
                  showGradient
                  xAxisThickness={0}
                  yAxisThickness={0}
                  trimYAxisAtTop
                  barBorderTopLeftRadius={15}
                  barBorderTopRightRadius={15}
                  rulesColor="transparent"
                  onPress={(item: ChartEntry) => {
                    if (selectedBarItem === item) {
                      setSelectedBarItem(null);
                    } else {
                      setSelectedBarItem(item);
                    }
                  }}
                />
                />

this works for points 1-3 but when I tap the second bar whilst the first one is focused, the box's touch event will deselect it.
I tried to use the focus property and config but whilst nice with the additional styling options, it didn't deselect when touching outside a bar or when touching the same bar again.

Does anyone have any ideas on how to implement this?