带有React的离子弹出-如何使其粘连在按钮上

import React, { useState } from "react";
import Button from "@material-ui/core/Button";
import Popover from "@material-ui/core/Popover";
import Typography from "@material-ui/core/Typography";

const IonPopoverButton = () => {
  const [popoverOpen, setPopoverOpen] = useState(false);
  const [popoverAnchor, setPopoverAnchor] = useState(null);

  const handleButtonClick = (event) => {
    setPopoverOpen(true);
    setPopoverAnchor(event.currentTarget);
  };

  const handlePopoverClose = () => {
    setPopoverOpen(false);
    setPopoverAnchor(null);
  };

  return (
    <>
      <Button onClick={handleButtonClick}>按钮</Button>
      <Popover
        open={popoverOpen}
        anchorEl={popoverAnchor}
        onClose={handlePopoverClose}
        anchorOrigin={{
          vertical: "bottom",
          horizontal: "left",
        }}
        transformOrigin={{
          vertical: "top",
          horizontal: "left",
        }}
      >
        <Typography>这是一个弹出窗口</Typography>
      </Popover>
    </>
  );
};

export default IonPopoverButton;