onClick event not firing when clicking outside either an image or directly on the text

[aggaton]

I am using react-share like this with some material ui elements. Things work fine if I click directly on either icon or the text, however if I click outside near the edge of the button onClick event is not firing. It seems that since EmailShareButton handles all the click events it should be able to detect it anywhere that is part of the inside of that component, I see the mouse cursor changes so I assume it is clickable.

      <EmailShareButton url={link}>
          <Button className={clsx(classes.row)} >
              <EmailIcon
                  size={32}
                   />
          <Typography className={clsx(classes.text)}>
                   Email
           </Typography>
          </Button>
      </EmailShareButton>

menuRow and menuText has some styling, something like this

        row: {
            display: "flex",
            flexWrap: "nowrap",
            justifyContent: "flex-start",
            alignItems: "center",
            flexDirection: "row",
        },

        text: {
            paddingRight: "16px !important",
            fontFamily: "Source Sans Pro !important",
            fontStyle: "normal !important",
            fontWeight: "600 !important" as any,
            fontSize: "16px !important",
            lineHeight: "20px !important",
            display: "flex",
            alignItems: "center",
            color: grey,
            '&:hover': {
                background: off-white + " !important",
                color: black + " !important",
            },
        },