How to create 2 circles that snap to data coordinates on vertical cursor line in Victory (reactjs)?

Question

I am using functional reactjs and the Victory library to create something similar to this google finance chart screenshot. My custom tooltip does not look like this one but I need the same kind of behavior with the vertical dashed cursor line and the blue and yellow dots.

I have a custom flyoutComponent:

labelComponent={<VictoryTooltip flyoutComponent={<MyTooltip />} />}

In MyTooltip, I have a vertical line and one circle:

<g style={{ textAlign: 'left' }}> <line x1={x} y1={0} x2={x} y2={540} style={cursorLine} /><circle cx={x} cy={y} r="8" style={dataPointGraphic} /><g/>

One circle works and manages to snap to the data points in the VictoryArea, but I am unable to get the second circle/dot to show on the VictoryLine.