React state change doesn't always trigger a chart redraw

I am trying to create a line chart where hovering over an activate data point will also show a vertical line at that point - as per gif below.


The intention is for the green line to only appear when a point on the chart is active, meaning it should hide once the user moves the mouse away from the chart and no scatter point is selected.

I have some code that achieves this outcome but it uses react state, and changes to the state don't always re-render the chart. The code checks if there is an active object, and only renders the line if there is. However due to the state being one step behind (usually), the line doesn't disappear when you roll off the chart.

Is there a better approach to what I'm trying to achieve here or a way I can force the chart to update when `active` becomes null?

```
const [active, setActive] = useState(null)

const onActivated = (points: any[], props: any) => {
if (points?.length && props?.mousePosition?.x) {
setActive({ point: points[0], mouseX: props.mousePosition.x })
}
}

const onDeactivated = (points: any[], props: any) => {
if (!points?.[0]?.eventKey) {
setActive(null)
}
}

const activeDataPointX = (): number => {
const startX = 0
if (active?.point?.eventKey) {
return startX + (active.point.eventKey / (chartData.length - 1)) * chartWidth
}
return startX
}

const chartWidth = 400
const chartHeight = 400

const chartData = [
{ x: 1, y: 2 },
{ x: 2, y: 3 },
{ x: 3, y: 5 },
{ x: 4, y: 4 },
{ x: 5, y: 7 },
]

return (
`y: ${datum.y}`}
labelComponent={}
onActivated={(points, props) => onActivated(points, props)}
onDeactivated={(points, props) => onDeactivated(points, props)}
/>
}
>
{active?.point?.eventKey && (

)}

(active ? 10 : 5)} />

)}
```

Another issue here is that when using `voronoiDimension="x"` it makes the tooltip move with the mouse on the y-axis. Is there a way to prevent that? It looks like the only way is to remove §`voronoiDimension="x"`, but then you no longer get the desired mouse/point detection.

As well as this issue, there seems to be a bug when rolling over the first scatter data point -

`Unhandled Runtime Error
TypeError: Cannot read properties of undefined (reading 'name')`

```
Call Stack
eval
../../node_modules/victory-core/es/victory-util/helpers.js (290:0)
Array.reduce

traverseChildren
../../node_modules/victory-core/es/victory-util/helpers.js (288:0)
Module.reduceChildren
../../node_modules/victory-core/es/victory-util/helpers.js (322:0)
getStringsFromCategories
../../node_modules/victory-core/es/victory-util/wrapper.js (372:9)
getCategoryAndAxisStringsFromChildren
../../node_modules/victory-core/es/victory-util/wrapper.js (419:0)
Module.getStringsFromChildren
../../node_modules/victory-core/es/victory-util/wrapper.js (424:0)
getCalculatedProps
../../node_modules/victory-chart/es/helper-methods.js (103:19)
eval
../../node_modules/victory-chart/es/victory-chart.js (48:29)
updateMemo
../../node_modules/react-dom/cjs/react-dom.development.js (15867:0)
Object.useMemo
../../node_modules/react-dom/cjs/react-dom.development.js (16413:0)
Object.useMemo
../../node_modules/react/cjs/react.development.js (1532:0)
VictoryChart
../../node_modules/victory-chart/es/victory-chart.js (47:24)
```

Any help would be appreciated.

Thanks,

Matt

Reproduce the redraw, voronoiDimension, and first-point hover failures with the shown VictoryChart, VictoryVoronoiContainer, VictoryLine, and VictoryScatter setup. Start by tracing the reported paths in victory-core helpers.js and victory-chart helper-methods.js; done means the active line clears on deactivation, x-only tooltip behavior is correct, and first-point hover no longer throws.

Written by the indexing model from the issue text.