Material-UI Popovers

import React from "react";
// @material-ui/core components
import Popover from "@material-ui/core/Popover";
import Button from "@material-ui/core/Button";
import Box from "@material-ui/core/Box";

export default function Example() {
  const [anchorEltop, setAnchorEltop] = React.useState(null);
  const [anchorElright, setAnchorElright] = React.useState(null);
  const [anchorElbottom, setAnchorElbottom] = React.useState(null);
  const [anchorElleft, setAnchorElleft] = React.useState(null);
  const handleClicktop = (event) => {
    setAnchorEltop(event.currentTarget);
  };
  const handleClickright = (event) => {
    setAnchorElright(event.currentTarget);
  };
  const handleClickbottom = (event) => {
    setAnchorElbottom(event.currentTarget);
  };
  const handleClickleft = (event) => {
    setAnchorElleft(event.currentTarget);
  };
  const handleClosetop = () => {
    setAnchorEltop(null);
  };
  const handleCloseright = () => {
    setAnchorElright(null);
  };
  const handleClosebottom = () => {
    setAnchorElbottom(null);
  };
  const handleCloseleft = () => {
    setAnchorElleft(null);
  };
  const opentop = Boolean(anchorEltop);
  const openright = Boolean(anchorElright);
  const openbottom = Boolean(anchorElbottom);
  const openleft = Boolean(anchorElleft);
  const idtop = opentop ? "simple-popover-top" : undefined;
  const idright = openright ? "simple-popover-right" : undefined;
  const idbottom = openbottom ? "simple-popover-bottom" : undefined;
  const idleft = openleft ? "simple-popover-left" : undefined;
  const topCenter = {
    vertical: "top",
    horizontal: "center",
  };
  const bottomCenter = {
    vertical: "bottom",
    horizontal: "center",
  };
  const centerRight = {
    vertical: "center",
    horizontal: "right",
  };
  const centerLeft = {
    vertical: "center",
    horizontal: "left",
  };
  return (
    <>
      <Box display="inline-block" marginRight="1rem">
        <Button
          aria-describedby={idtop}
          variant="contained"
          onClick={handleClicktop}
        >
          Popover on top
        </Button>
      </Box>
      <Popover
        id={idtop}
        open={opentop}
        anchorEl={anchorEltop}
        onClose={handleClosetop}
        anchorOrigin={topCenter}
        transformOrigin={bottomCenter}
      >
        This is a very beautiful popover, show some love.
      </Popover>
      <Box display="inline-block" marginRight="1rem">
        <Button
          aria-describedby={idright}
          variant="contained"
          onClick={handleClickright}
        >
          Popover on right
        </Button>
      </Box>
      <Popover
        id={idright}
        open={openright}
        anchorEl={anchorElright}
        onClose={handleCloseright}
        anchorOrigin={centerRight}
        transformOrigin={centerLeft}
      >
        This is a very beautiful popover, show some love.
      </Popover>
      <Box display="inline-block" marginRight="1rem">
        <Button
          aria-describedby={idbottom}
          variant="contained"
          onClick={handleClickbottom}
        >
          Popover on bottom
        </Button>
      </Box>
      <Popover
        id={idbottom}
        open={openbottom}
        anchorEl={anchorElbottom}
        onClose={handleClosebottom}
        anchorOrigin={bottomCenter}
        transformOrigin={topCenter}
      >
        This is a very beautiful popover, show some love.
      </Popover>
      <Box display="inline-block" marginRight="1rem">
        <Button
          aria-describedby={idleft}
          variant="contained"
          onClick={handleClickleft}
        >
          Popover on left
        </Button>
      </Box>
      <Popover
        id={idleft}
        open={openleft}
        anchorEl={anchorElleft}
        onClose={handleCloseleft}
        anchorOrigin={centerLeft}
        transformOrigin={centerRight}
      >
        This is a very beautiful popover, show some love.
      </Popover>
    </>
  );
}