MUI AppBar with next/link Button Click Issue

Question

Using the MUI AppBar layout and next/link I am having an issue where only the link text results in a click being handled that results in navigation.

I am using what I believed to have been pretty standard code with the MUI AppBar found at https://mui.com/material-ui/react-app-bar/#app-bar-with-responsive-menu with slight modification for MUI.

...
<Menu
  id="menu-appbar"
  anchorEl={anchorElNav}
  anchorOrigin={{
    vertical: "bottom",
    horizontal: "left",
  }}
  open={Boolean(anchorElNav)}
  onClose={handleCloseNavMenu}
  sx={{
    display: { xs: "block", md: "none" },
  }}
>
  <Link href="/categories" passHref>
    <MenuItem onClick={handleCloseNavMenu}>
       <Typography textAlign="center">
         <a style={{ textDecoration: "none", color: "inherit" }}>
           Categories
         </a>
       </Typography>
     </MenuItem>
   </Link>
...

This code does result in navigation, but only when the link text is clicked directly. If you click on the surrounding button, you get the slick looking visuals, but it does not result in any navigation.

Is there a correct way of setting this up so that the next/link benefits are preserved and used and where clicking anywhere on the button results in navigation?

Thank you for any help you can offer.