材质UI App Bar对象具有意外的工具提示

Question

我已经坚持了半天，试图找到解决方案，直到我怀疑这是否是一个错误。

我基于reactjs和Material ui构建了一个应用程序，并基于Material ui的Appbar挂钩创建了Navbar函数。但是导航栏中的每个元素（链接，按钮，图标和img）都有一个工具提示[Object object]。我尝试了所有删除操作。我相信它来自appBar Hook，因为我在应用程序中还有很多其他元素，并且它是唯一受影响的元素。

它似乎与材料ui创建的任何类型的工具提示都不相关。 我在应用程序中有很多其他元素（链接，按钮，图标），但它们都没有这种工具提示。 与浏览器/操作系统无关。

Here is how it looks like

这是导航栏功能

const drawerWidth = 240;
const useStyles = makeStyles(theme => ({
    grow: {
        flexGrow: 1,
    },
    root: {
        display: 'flex',
    },
    logo: {
        marginRight: theme.spacing(5),
        marginLeft: theme.spacing(5),
        maxWidth: 180,
        [theme.breakpoints.up('sm')]: {
            display: 'block',
        },
    },
    drawer: {
        [theme.breakpoints.up('sm')]: {
            width: drawerWidth,
            flexShrink: 0,
        },
    },
    appBar: {
        zIndex: theme.zIndex.drawer + 1,
        background: 'linear-gradient(80deg, #29339B 0, #74A4BC 100%)', 
        boxShadow: 'none'
    },
    menuButton: {
        marginRight: theme.spacing(2),
        [theme.breakpoints.up('sm')]: {
            display: 'none',
        },
    },
    toolbar: theme.mixins.toolbar,
    drawerPaper: {
        width: drawerWidth
    },
    content: {
        flexGrow: 1,
        padding: theme.spacing(3),
    },
    closeMenuButton: {
        marginRight: 'auto',
        marginLeft: 0,
    },
    buttonAppbar: {
        color: '#FFFFFF',
        fontSize: '1rem',
        marginRight: '2rem',
        [theme.breakpoints.down('sm')]: {
            display: 'none',
        }
    }
}));
function NavBar() {
    const Menuitems = ['Home', 'Activity', 'Transfers', 'Wallet', 'Help']
    const classes = useStyles();
    const theme = useTheme();
    const preventDefault = (event) => event.preventDefault();
    const [mobileOpen, setMobileOpen] = React.useState(false);
    function handleDrawerToggle() {
        setMobileOpen(!mobileOpen)
    }
    const drawer = (
        <div>
            <List>
                {Menuitems.map((text, index) => (
                    <ListItem button key={text}>
                        <ListItemText primary={text} />
                    </ListItem>
                ))}
            </List>
        </div>
    );

    return (
        <div className={classes.root}>
            <CssBaseline />
            <AppBar position="fixed" className={classes.appBar} title={<img src={ecu_logoname_white}/>}>
            <Container maxWidth="lg">
                <Toolbar>
                    <IconButton
                        color="inherit"
                        aria-label="Open drawer"
                        edge="start"
                        onClick={handleDrawerToggle}
                        className={classes.menuButton}
                    >
                        <MenuIcon />
                    </IconButton>
                    <img src={ecu_logoname_white} alt="logo" className={classes.logo} />
                        <Link href="#"  className={classes.buttonAppbar}>Home</Link>
                        <Link href="/activity" className={classes.buttonAppbar}>Activity</Link>
                        <Link href="#" className={classes.buttonAppbar}>Transfers</Link>
                        <Link href="#" className={classes.buttonAppbar}>Wallet</Link>
                        <Link href="#" className={classes.buttonAppbar}>Help</Link>
                    <div className={classes.grow} />
                    
                    <IconButton aria-label="show 17 new notifications" color="inherit">
                        <Badge badgeContent={17} color="secondary">
                            <NotificationsIcon />
                        </Badge>
                    </IconButton>
                    <IconButton
                        edge="end"
                        aria-label="account of current user"
                        aria-haspopup="true"
                        color="inherit"
                    >
                        <AccountCircle />
                    </IconButton>
                    <Button  className={classes.buttonAppbar} onClick={() => firebase.auth().signOut()}>LOGOUT</Button>
                </Toolbar>
                </Container>
            </AppBar>

            <nav className={classes.drawer}>
                {/* The implementation can be swapped with js to avoid SEO duplication of links. */}
                <Hidden smUp implementation="css">
                    <Drawer
                        variant="temporary"
                        anchor={theme.direction === 'rtl' ? 'right' : 'left'}
                        open={mobileOpen}
                        onClose={handleDrawerToggle}
                        classes={{
                            paper: classes.drawerPaper,
                        }}
                        ModalProps={{
                            keepMounted: true, // Better open performance on mobile.
                        }}
                    >
                        <IconButton onClick={handleDrawerToggle} className={classes.closeMenuButton}>
                            <CloseIcon />
                        </IconButton>
                        {drawer}
                    </Drawer>
                </Hidden>

            </nav>
        </div>
    );

    NavBar.propTypes = {
        // Injected by the documentation to work in an iframe.
        // You won't need it on your project.
        container: PropTypes.object,
    }
};
export default NavBar;

非常感谢