Список меню перекрывается другим списком меню

Question

Я новичок, чтобы реагировать. js и пользовательский интерфейс материала, я пытаюсь создать верхнюю панель навигации для моего проекта, я использую композицию 'MenuList' для моей верхней панели навигации, первая кнопка - успех, но когда я добавлю еще один и нажму на него, он будет перекрываться с первым списком меню. Может кто-нибудь дать несколько советов? Спасибо всем.

вот изображение проблемы

и вот мой исходный код navbar

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Paper from '@material-ui/core/Paper';
import Tabs from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab';
import ClickAwayListener from '@material-ui/core/ClickAwayListener';
import Button from '@material-ui/core/Button';
import Grow from '@material-ui/core/Grow';
import Popper from '@material-ui/core/Popper';
import MenuItem from '@material-ui/core/MenuItem';
import MenuList from '@material-ui/core/MenuList';
import { Link, Route, withRouter } from 'react-router-dom';

const useStyles = makeStyles({
    root: {
        flexGrow: 1,
    },
});

export default function CenteredTabs() {
    const classes = useStyles();
    const [value, setValue] = React.useState(0);
    const [open, setOpen] = React.useState(false);
    const anchorRef = React.useRef(null);
    const handleChange = (event, newValue) => {
        setValue(newValue);
    };

    const handleToggle = () => {
        setOpen(prevOpen => !prevOpen);
    };

    const handleClose = event => {
        if (anchorRef.current && anchorRef.current.contains(event.target)) {
            return;
        }

        setOpen(false);
    };

    function handleListKeyDown(event) {
        if (event.key === 'Tab') {
            event.preventDefault();
            setOpen(false);
        }
    }

    // return focus to the button when we transitioned from !open -> open
    const prevOpen = React.useRef(open);
    React.useEffect(() => {
        if (prevOpen.current === true && open === false) {
            anchorRef.current.focus();
        }

        prevOpen.current = open;
    }, [open]);

    return (
        <Paper className={classes.root}>
            <Tabs
                value={value}
                onChange={handleChange}
                indicatorColor="secondary"
                textColor="primary"
            >
                <Tab label="WeniPay" to="/" component={Link} style={{ float: "left" }} />
                <Tab label="Home" to="/" component={Link} />
                <Tab label="Login" to="/works" component={Link} />
                <Tab label="Pay" to="/payPage" component={Link} />
            </Tabs>
            <Button
                ref={anchorRef}
                aria-controls={open ? 'menu-list-grow' : undefined}
                aria-haspopup="true"
                onClick={handleToggle}
            >
                Toggle Menu Grow
        </Button>
            <Popper open={open} anchorEl={anchorRef.current} role={undefined} transition disablePortal>
                {({ TransitionProps, placement }) => (
                    <Grow
                        {...TransitionProps}
                        style={{ transformOrigin: placement === 'bottom' ? 'center top' : 'center bottom' }}
                    >
                        <Paper>
                            <ClickAwayListener onClickAway={handleClose}>
                                <MenuList autoFocusItem={open} id="menu-list-grow" onKeyDown={handleListKeyDown}>
                                    <MenuItem onClick={handleClose}>Profile</MenuItem>
                                    <MenuItem onClick={handleClose}>My account</MenuItem>
                                    <MenuItem onClick={handleClose}>Logout</MenuItem>
                                </MenuList>
                            </ClickAwayListener>
                        </Paper>
                    </Grow>
                )}
            </Popper>
            <Button
                ref={anchorRef}
                aria-controls={open ? 'menu-list-grow' : undefined}
                aria-haspopup="true"
                onClick={handleToggle}
            >
                s
        </Button>
            <Popper open={open} anchorEl={anchorRef.current} role={undefined} transition disablePortal>
                {({ TransitionProps, placement }) => (
                    <Grow
                        {...TransitionProps}
                        style={{ transformOrigin: placement === 'bottom' ? 'center top' : 'center bottom' }}
                    >
                        <Paper>
                            <ClickAwayListener onClickAway={handleClose}>
                                <MenuList autoFocusItem={open} id="menu-list-grow" onKeyDown={handleListKeyDown}>
                                    <MenuItem onClick={handleClose}>1</MenuItem>
                                    <MenuItem onClick={handleClose}>2</MenuItem>
                                    <MenuItem onClick={handleClose}>3</MenuItem>
                                </MenuList>
                            </ClickAwayListener>
                        </Paper>
                    </Grow>
                )}
            </Popper>
        </Paper>
    );
}

и вот главная страница

import React from 'react';
import styles from './App.module.scss';
import { Link, Route, withRouter } from 'react-router-dom';
import HomePage from './HomePage';
import WorkPage from './WorkPage';
import WorkPageDetail from './WorkPageDetail';
import Header from './header';
import PayPage from './PayPage';

class App extends React.Component {
  render() {
    const { location } = this.props;
    return (
      <div className={styles.App}>

        {/* header */}
        <header className={styles.header}>
          <div className={styles.box}>
            <Header />
          </div>
        </header>

        {/* content */}
        <section className={styles.content}>
          <Route path="/" exact component={HomePage} />
          <Route path="/works" exact component={WorkPage} />
          <Route path="/works/:id" exact component={WorkPageDetail} />
          <Route path="/payPage" exact component={PayPage} />
        </section>

        {/* footer */}
        <footer className={styles.footer}>
          <p>© <b>MyPay</b></p>
        </footer>
      </div>
    );
  }
}

export default withRouter(App);