Объект Material UI App Bar имеет непредусмотренную всплывающую подсказку

Question

Я застрял на этом полдня и пытался найти решение до такой степени, что мне стало интересно, является ли это ошибкой.

Я создаю приложение на основе reactjs и материала ui и Я создал функцию Navbar, основанную на хуке Appbar из материала ui. Но каждый элемент (ссылки, кнопка, значки и изображение) на панели навигации имеет всплывающую подсказку [объект объекта]. Все перепробовал, чтобы удалить. Я считаю, что это происходит из appBar Hook, потому что у меня много других элементов в приложении, и это единственный затронутый.

Это не похоже ни на какие всплывающие подсказки, созданные материальным пользовательским интерфейсом. У меня много других элементов в приложении (ссылки, кнопки, значки), и ни у одного из них нет такой всплывающей подсказки. Это не связано с браузером / ОС.

Вот как это выглядит

и вот функция навигационной панели

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;

Большое спасибо