TwentyTwentyFour. Change hover effect on the navigation

Hello,

I want to overwrite this :

"core/navigation": {

                "elements": {

                    "link": {

                        ":hover": {

                            "typography": {

                                "textDecoration": "underline"

                            }

                        },

                        "typography": {

                            "textDecoration": "none"

                        }

                    }

                },

                "typography": {

                    "fontWeight": "500"

                }

            },

So it gets a red background and a white text on hover.

So I did :

"core/navigation": {

? ? ? ? ? ? ? ? "elements": {

? ? ? ? ? ? ? ? ? ? "link": {

? ? ? ? ? ? ? ? ? ? ? ? ":hover": {

? ? ? ? ? ? ? ? ? ? ? ? ? ? "typography": {

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? "backgroundColor": "red" , 
                                "color": "white"
? ? ? ? ? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? ? ? ? ? },

? ? ? ? ? ? ? ? ? ? ? ? "typography": {

? ? ? ? ? ? ? ? ? ? ? ? ? ? "textDecoration": "none"

? ? ? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? },

? ? ? ? ? ? ? ? "typography": {

? ? ? ? ? ? ? ? ? ? "fontWeight": "500"

? ? ? ? ? ? ? ? }

? ? ? ? ? ? },

But still on hover I still see the underline .
What do I do wrong here so I get a red square on hover with a white text.