how to set MenuItem be <a> inside <li> - reactjs

Question

I'm new to Material-UI.
I want to make some popover and saw Menu and MenuItem in Menu Demo. They are perfect except for one thing. I want the menu item to be link.
By default MenuItem is li, (I think) because Menu is ul. But it is not so hard that make an item link by setting component="a" or component={RouterLink}. But in this case, they lose li.
For Screen Reader like program, I heard that using an appropriate Html tag is important. (It is called Semantic Web. Right?)
In this perspective, I want to menu items to be a inside li.
-- Trial --
<MenuItem>
<a>link text</a>
</MenuItem>
a is inside li. But it looks different from the case below.
<MenuItem component="a" href="/">
link text
</MenuItem>
Then, I try
<MenuItem>
<a style={{all: "inherit"}}>
link text
</a>
</MenuItem>
It looks satisfactory, but the color changes after clicking it, (I think) because a:visited { color: ...; } is not inherited.
Finally I tried
<li>
<MenuItem component="a" href"/">
link text
</MenuItem>
</li>
Yeah. It solves all problems. But, what if I forget to add li?
My menu contains many items. Some of them are link and others are not. Then should I add li directly by distinguishing only the cases of link?
-- Question --
Is my solution is best? How about you? Please share your way.

Answer 1

Semantically, MenuItem is more suitable for li because it represents an item in a list. The component props's default value of MenuItem is 'li' after all. So I'd go for:
<MenuItem>
<a style={{all: "inherit"}}>
link text
</a>
</MenuItem>
But, what if I forget to add li?
That's one reason to use React, you can easily de-duplicate part of your components by creating another component and reuse it:
const useStyles = makeStyles((theme) => ({
root: {
"& a:visited": {
color: theme.palette.primary.main
}
}
}));
function MenuItemLink({ children, href, onClick }) {
const classes = useStyles();
return (
<MenuItem onClick={onClick} className={classes.root}>
<a href={href}>{children}</a>
</MenuItem>
);
}
<Menu
id="simple-menu"
anchorEl={anchorEl}
keepMounted
open={Boolean(anchorEl)}
onClose={handleClose}
>
<MenuItemLink href="/" onClick={handleClose}>
Profile
</MenuItemLink>
<MenuItemLink href="/" onClick={handleClose}>
My account
</MenuItemLink>
<MenuItemLink href="/" onClick={handleClose}>
Logout
</MenuItemLink>
</Menu>
Live Demo