Unable to create changeable states whilst hovering over a list of text in XD

Hi
I would like to display a list of text where the user can hover over one line of text and the rest of the list turns to a lighter colour.

I have created individual lines of text with a rectangle behind the text to be used as a hover area.

I have then placed the each line of text and it's own hover area in individual groups and then placed all of those groups within a component.

With the component highlighted, I have created a list of states for each line and then edited each state so that only the selected line's text is the original colour and the other lines have a lighter colour.

In the Prototype section I have selected the default state and selected the first line to create a hover over interaction where the destination is the state of the area where the user is hovering over.

I have then gone into each state and done the same so whilst the user has hovered over the first line of text, making all of the below text a lighter colour, the user can then move their cursor down to the next line to then active the hover state for that line which should make that line of text the original colour and all of the rest, including the line above, a lighter colour but this doesn't seem to work and the first line is still the original colour even when I hover over the second line.

Here is a link to what I have done. As you can see, the user cannot move the cursor down the list to change the states. https://xd.adobe.com/view/1f968665-7540-4add-af1f-0bc817f5f167-4ac5/?fullscreen&hints=off

Looking forward to hearing from you with any advice.