Prevent some buttons (Pop Up menu, etc.) nested inside <Link><a>...</a></Link> from redirecting in Nextjs & Material UI

I am using NextJS and MaterialUI and I have some code which displays a card with some text and buttons inside it.

Card Component Example

And certain parts of the card will take the user to, lets say, Page A. Essentially, upon clicking anywhere on the card (title, text, blank areas) the user should be redirected to that page.

But the problem is that just using link tag on the individual buttons is not enough, blank spaces become unused.

What I tried is to nest the entire Card component (Made with in MaterialUi). Though clicking anywhere (blank areas also) redirects the user to Page A, but clicking buttons like Like, Comment, Share and the 3 dot button which is supposed to display a pop up menu also redirect to that page, which is not desirable.

So, is there a clean way to prevent certain components from acting as links when nested inside the and/or tag? Even hovering over the buttons should not display the link on the bottom left of any browser. Any alternative other than onClick: {(e) => e.stopPropogation()} will be preferred.

// data
return (
   // Can wrap Paper with <Link href="www.google.com"><a>"..."</a></Link>
   <Paper>
    <div>
      <CardTopBar // contains the three dot menu (a custom component)
        data={data}
      />
      <Link href="www.google.com">
        <a><div><span>{title}</span></div></a>
       </Link>
       <Link href="www.google.com">
         <a><h1>{title}</h1></a>
        </Link>

        <List disablePadding>
          <ListItem disableGutters>
            <Link href="www.profilepage.com">
              <a>
                <ListItemAvatar>
                  <Avatar alt="Profile Image" src="">{userProfile}</Avatar>
                </ListItemAvatar>
              </a>
            </Link>
            <Link href="#">
              <a><ListItemText primary={firstName} secondary={otherText}/></a>
            </Link>
            <ListItemSecondaryAction>
              <Link href="www.otherdetails.com">
                <a>
                  <Button color="primary" size="small" variant="outlined">
                    {otherDetails}
                  </Button>
                </a>
              </Link>
            </ListItemSecondaryAction>
          </ListItem>
        </List>
      </div>
      <Link href={"www.google.com"}>
        <a><div><p>{text}</p></div></a>
      </Link>
      <div >
        <MenuItem onClick={() => {}}>
          <ListItemIcon>
            <ThumbUp />
          </ListItemIcon>
          <ListItemText>
            <p>Like</p>
          </ListItemText>
        </MenuItem>
        <MenuItem onClick={() => {}}>
          <ListItemIcon>
            <ChatBubbleOutlineOutlined />
          </ListItemIcon>
          <ListItemText>
            <p>Comment</p>
          </ListItemText>
        </MenuItem>
        <MenuItem onClick={() => {}}>
          <ListItemIcon>
            <ShareOutlined />
          </ListItemIcon>
        </MenuItem>
    </div>
   </Paper>
 );
}