React link's onClick event state change is not happening

Question

I have used react links with mui and I am trying to highlight the active link in header. My attempt is as below.

import Link from "@mui/material/Link";
import { Link as RouterLink } from "react-router-dom";

const [active, setActive] = useState(0); 
<Link 
   {...{color: "inherit",component: RouterLink, onClick: (()=>setActive(1)),
        style: { textDecoration: active === 1 ? "underline" : "none"},
        to: "abc"}}>
   Abc
</Link>

Here when I clicked abc for the first time state is not changing. So link is not get underlined. But once I click again state get changed and link gets underlined. So how can I get it underlined even for the first click?