text decoration not working for mui lit items

Question

I am using mui lists to create a sidebar.

 <List>
          <StyledLink to="/">
            <ListItem disablePadding>
              <ListItemButton>
                <ListItemIcon>
                  <GridView />
                </ListItemIcon>
                <ListItemText primary="Dashboard" />
              </ListItemButton>
            </ListItem>
          </StyledLink>
 </List>

I tried creating a custom Link like below,

import { Link } from "react-router-dom";

const StyledLink = ({ to, style = {}, children }) => (
  <Link to={to} style={{ ...style, textDecoration: "none" }}>
    {children}
  </Link>
);

export default StyledLink;

I also tried this solution.

But still the blue color doesn't go away and it doesn't inherit mui list item text formatting.