I intend to use the "CopyToClipboard" package so that when you click on the tag below, something is saved to the clipboard. This also works currently, but only if you double click on the tag. How do I solve it that I only have to click once and it appears directly on the clipboard?

const Card = (props: ICardProps) => {
  // // State of Clipboard
  const [clipboard, setClipboard] = useState("");
  const [copied, setCopied] = useState(false);

  const cpyClip = () => {
    setClipboard(`short.url/${props.shortUrl.shortUrl}`);
    setCopied(false);
  };

  return (
    <div>
      <div className="card-body">
        <div className="card-section">
          <div className="icon-controller">
            <CopyToClipboard
              text={clipboard}
              onCopy={() => {
                setCopied(true);
              }}
            >
              <span></span>
            </CopyToClipboard>

            <CopyToClipboard text={clipboard} onCopy={() => setCopied(copied)}>
              <i onClick={cpyClip} className="far fa-copy"></i>
            </CopyToClipboard>
          </div>
        </div>
      </div>
    </div>
  );
};