I have customized the following code for the MUI Popper component. The content that opens through the popper is now dynamic. How can I also make the button dynamic so that I can use it for other parts as well, such as filters and search?

import * as React from "react";
import Popper from "@mui/material/Popper";
import user from "@/public/user.svg";
import Image from "next/image";

export default function SimplePopper({ children }) {
  const [anchorEl, setAnchorEl] = React.useState(null);

  const handleClick = (event) => {
    setAnchorEl(anchorEl ? null : event.currentTarget);
  };

  const open = Boolean(anchorEl);
  const id = open ? "simple-popper" : undefined;

  return (
    <div>
      <button
        aria-describedby={id}
        type="button"
        onClick={handleClick}
        className="flex items-center gap-x-2 rounded-lg  lg:rounded-xl border border-[#d2d1d3] lg:py-2 lg:pl-3 lg:pr-8 px-3 py-2 "
      >
        <Image src={user} alt="" className="" />
        <span className="pr-2 max-lg:hidden">User name</span>
      </button>
      <Popper id={id} open={open} anchorEl={anchorEl}>
        {children}
      </Popper>
    </div>
  );
}

Because of the presence of id and onclick in the button, I cannot do this easily.