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

[rstor1]

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.

Google finance example:

Code snippets I have so far. I have a custom flyoutComponent declared in a VoronoiContainer:

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

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

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. I do not understand how the x and y in MyTooltip props are the coordinates I need for snapping to the area chart part and how I can get the same kind of coordinates for my second line. the lineData that I have now is a date and a numeric money value, they are not floating numbers like x and y in the props.

[rstor1]

Am I on the right track thinking I might need some form voronoi tooltips with grouped components? https://formidable.com/open-source/victory/gallery/voronoi-tooltips-with-grouped-components/