How to use href in Material-ui

Question

I asked this code before but worded it poorly. I'm trying to get my menuItems to work with href, so far my "Home" button works with href but i cannot get, "Sessions Home", "Book a Session" or "[S] Host a session" to work.

Any help is appreciated :D

P.S: The onClick: () => {Console.log()} inside of "Sessions home" works but that's as far as i've gotten.

Header.js

import React from "react";
import MenuButton from "./MenuButton.js";

const Header = () => {
    const menu = [
        {
            name: "Home",
            href: "/",
        },
        {
            name: "Sessions",
            menuItems: [
                {
                    name: "Sessions Home",
                    href: "/sessions",
                    key: "Sessions",
                    onClick: () => {Console.log("This button click works!")}
                },
                {
                    name: "Book a Session",
                    href: "/sessions/book",
                    key: "Book"
                },
                {
                    name: "[S] Host a session",
                    href: "/sessions/host",
                    key: "Host"
                }
            ]
        }
    ];
    return menu.map((item, index) => <MenuButton key={index} menu={item} />);
};
export default Header;

MenuButton.js

import React from "react";
import { Button, Menu, MenuItem } from "@material-ui/core";

const MenuButton = ({ menu }) => {
    const [anchorEl, setAnchorEl] = React.useState(null);

    const handleClick = (event) => {
        setAnchorEl(event.currentTarget);
    };

    const handleClose = () => {
        setAnchorEl(null);
    };

    if(menu.menuItems == null){
        return (
            <>
                <Button
                    aria-controls={`${menu.name}-menu`}
                    aria-haspopup="true"
                    href={menu.href}
                    onClick={handleClick}
                >
                    {menu.name}
                </Button>
            </>
        );
    } else {
        return (
            <>
                <Button
                    aria-controls={`${menu.name}-menu`}
                    aria-haspopup="true"
                    onClick={handleClick}
                >
                    {menu.name}
                </Button>
                <Menu
                    id={`${menu.name}-menu`}
                    anchorEl={anchorEl}
                    getContentAnchorEl={null}
                    keepMounted
                    open={Boolean(anchorEl)}
                    onClose={handleClose}
                >
                    {menu.menuItems.map((item) => (
                        <MenuItem href={item.href} key={item.href} onClick={item.onClick}>
                            {item.name}
                        </MenuItem>
                    ))}
                </Menu>
            </>
        );
    }
};

export default MenuButton;

Answer 1

You can do something like this

 <MenuItem
  component={Link}
  // the 'to' prop (and any other props not recognized by MenuItem itself)
  // will be passed down to the Link component
  to="/profile">
  Profile
</MenuItem>

Github Issues reference solution. https://github.com/mui-org/material-ui/issues/204#issuecomment-167754150