navigation block hove not working with !mportant in theme.json

Hello, I’m having a little issue with link hover states using theme.json /global styles ui.
I’m working on my site using wamp server locally currently.
It seems that when I add a navigation link hover color to my theme.json or wordpress global styles ui, there is no effect to front-end when viewing the page. I’m using a child theme and updating the child theme.json file. The following is a snippet of the CSS that I have added to the Theme.json file.

"elements": {
	"link": {
	"color": {
	"text": "#212121"
	},
	"typography": {
	"textDecoration": "none"
			},
	"typography": {
	"textDecoration": "none"
			},
	"color":{
	"text": "#00C7B1 "
			}
}
}
},

When i check the browser inspector, the navigation menu is only reading the link color declaration as inherit. Which this is overriding my custom theme.json color.

.wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content {
    color: inherit;
}

.wp-block-navigation a:where(:not(.wp-element-button)):hover {
    color: #00BCC6;
    text-decoration: none;
}

It appears that the only way for the navigation links to show my color choice on front-end is to add !important to the theme.json file

"elements": {
	"link": {
	"color": {
	"text": "#212121"
	},
     typography": {
					"textDecoration": "none"
         },
	":hover": {
	"typography": {
						"textDecoration": "none"
	},
	"color":{
	"text": "#00C7B1 !important"
}
}
}
},

Not sure why does the global Style link hover only works when !important is added to Theme.json file?
Thanks for any help or assistance with this.