How to trigger OnMouseOver AND onClick triggered from the same button?

I am trying to implement a navigation feature, where the Navigation options have two features of functionality using React.js

The first will be a hover event, that reveals a list of menu items using { Menu, Button, MenuItem } from '@mui/material' the second will be an onClick event that will eventually scroll a portion of the webpage into view.

At the moment, I am struggling to resolve a conflict between these two mouse events. It appears I cannot have both, and one consistently overrides the capacity to trigger the other. here is simplified script based on my code:

function Navbar = () {

  const handleClickNav = () => {
    console.log('hello');
  };

  const [anchorEl, setAnchorEl] = useState(null);

  return (
           <Button
              style={{ textTransform: 'none' }}
              name="el1"
              aria-controls="simple-menu"
              aria-haspopup="true"
              onMouseOver={(e) => setAnchorEl(e.currentTarget)}
              onClick={handleClickNav}
            >
              <p
                className="text-slate-200 text-md"
              >
                About Us
              </p>
            </Button>

        <Menu
          id="simple-menu"
          name="el1"
          anchorEl={anchorEl}
          keepMounted
          open={Boolean(anchorEl)}
          onClose={() => setAnchorEl(null)}
        >
          <MenuItem onClick={handleClose}>
            <p className="text-sm">Menu Item 1</p>
          </MenuItem>
          <MenuItem onClick={handleClose}>
            <p className="text-sm">Menu Item 2</p>
          </MenuItem>
          <MenuItem onClick={handleClose}>
            <p className="text-sm">Menu Item 3</p>
          </MenuItem>
        </Menu>
     );

How should I juggle both of these features?