The color of the navlinks doesn't change even though the state changes to dark mode

I am using react for the first time, and I am facing this error. (Sorry for this mess of a code)

App.js

const btnMode = {
    lightBtn: <LightModeIcon style={{color: "white", marginRight: "1.25rem",}} />,
    darkBtn: <NightsStayIcon style={{color: "#395B64", marginRight: "1.25rem",}} />,
  }

const [linkStyle, setLinkStyle] = useState({
    color: "black",
  });
const [btnStyle, setBtnStyle] = useState(btnMode.darkBtn);

const themeHandler = () => {

if(btnStyle.type.type.render.displayName === "NightsStayIcon") //to change from light to dark mode
 {

setBtnStyle(btnMode.lightBtn);
setLinkStyle({
        color: "white !important",
      });
 }

else{

setBtnStyle(btnMode.darkBtn);
setLinkStyle({
        color: "black",
      });
 }
}

return(
<div className="App">
        <Header style={linkStyle}/>
        <div onClick={themeHandler}>
          { btnStyle }
        </div>
</div>
);

I sent the state of the linkStyle to Header component which should change accordingly to the state of the btnStyle.

Header.js

function Header(props) {
    console.log(props.style) // {color: "white !important"} when state changes accordingly
    const navLinks = [
        { id: 0, body: "Home", link: "/" },
        { id: 1, body: "About", link: "/about" },
        { id: 2, body: "Articles", link: "/articles" },
        { id: 3, body: "Social", link: "/social" },
        { id: 4, body: "Contact", link: "/contact" },
    ];
    return (
    <div className="navContent">
                {navLinks.map((item) => (
                    <a href={item.link} key={item.id} style={props.style}>
                        {item.body}
                    </a>
                ))}
            </div>
)

In a tag, I cant get the style required even though I can see that in the console, the property does reflect the state change. What am I doing wrong here?