Multiple Hover States within one component not working

Hi, I liked the way you explained the problem in the most clear way by pointing out under the sub headlines "Example" and "Problem" 🙂 Sometimes we try to create screencasts/short videos but that might not be always necessary. So I'll also try to explain as clear as possible, there's a workaround for this by making each slice a seperate component with their own hover states, and in hover state of each slice, we need to select hover state on the components panel on the right, and by double clicking the component to get into the "inner" level of that hover state and paste the hover design of that slice. While doing this, we need to also paste the text of that slice (like "Donut 97.9 t") in the center of the graph/circle, but since we also need to make the text in default state invisible, we need to add a white bg to our hover text, to cover the text in the default state. Hope I managed to explain, I created hovers for first two states,  donuts and fries, you can see the prototype link here: https://xd.adobe.com/view/bbfc5b06-29f1-473c-ae5f-ae538188781c-eeaf/ 
and the file here: https://www.dropbox.com/s/vjvqntv4wsrilph/pie-chart-hover-edit.xd?dl=0 
Of course there's only one glitch here: every time you roll-out/exit the hover state of the slice you're hovering, first default text ("Total"..) text needs to appear since you can't enter directly another component's hover state without hovering out another element, if you can find a way without first default text appearing please share 🙂 Hope this helps, let me know if you have any questions, btw I liked the design very much! 🙂