如何在Material UI的SpeedDial中使用react-share？

import React from 'react';
import { SpeedDial, SpeedDialIcon, SpeedDialAction } from '@material-ui/lab';
import { ShareButton } from 'react-share';
import { FacebookShareButton, TwitterShareButton } from 'react-share';

const ShareSpeedDial = () => {
  const [open, setOpen] = React.useState(false);

  const handleOpen = () => {
    setOpen(true);
  };

  const handleClose = () => {
    setOpen(false);
  };

  return (
    <SpeedDial
      ariaLabel="Share"
      icon={<SpeedDialIcon />}
      onClose={handleClose}
      onOpen={handleOpen}
      open={open}
    >
      <SpeedDialAction
        icon={<ShareButton />}
        tooltipTitle="Share"
        onClick={handleClose}
      />
      <SpeedDialAction
        icon={<FacebookShareButton />}
        tooltipTitle="Share on Facebook"
        onClick={handleClose}
      />
      <SpeedDialAction
        icon={<TwitterShareButton />}
        tooltipTitle="Share on Twitter"
        onClick={handleClose}
      />
    </SpeedDial>
  );
};

const App = () => {
  return (
    <div>
      <h1>My App</h1>
      <ShareSpeedDial />
    </div>
  );
};