I need to be able to trigger a mouse event from the entire vertical bar of a Stacked Bar Chart.

Currently, if you add onMouseEnter on on <Bar ... it triggers when you mouse over the corresponding colour on each bar (which makes sense), but isn't what I need.

When you add a <Tooltip ... it is able to trigger when on a single bar, which is what I need, but i don't need the Recharts tooltip. I need to be able to call a function that triggers state within my React component. I've played around with trying to manipulate the Tooltip to do what I want, but I can't send down the active state (and the label which i was planning on using to differentiate between which bar was being hovered over) unless I sent it through the Tooltips's content prop as a new component. This doesn't work because you end up leaving the original component and therefor don't have access to its state.

My code:

        <BarChart
          width={205}
          height={275}
          barCategoryGap="25%"
          data={graphData}
          margin={{ top: 20, right: 15, left: 0, bottom: 5 }}
        >
          <XAxis
            dataKey="name"
            tickLine={false}
            tick={<XAxisTick />}
            stroke={color.grey400}
          />
          <Bar
            dataKey="project"
            stackId="a"
            fill={color.blueMedium}
            isAnimationActive={false}
            label={<BarLabel currency={currencySymbol} />}
            onMouseEnter={this.handleShowDivA}
            onMouseLeave={this.handleHideDivA}
          />
          <Bar
            dataKey="reccuring"
            stackId="a"
            fill={color.blueDark}
            isAnimationActive={false}
            onMouseEnter={this.handleShowDivB}
            onMouseLeave={this.handleHideDivB}
          />
        </BarChart>

What currently happens when using onMouseEnter etc:

What I need to happen:

Does anyone know how to do this? Is it even possible?