Tengo la intención de usar el paquete "CopyToClipboard" para que cuando haga clic en la etiqueta a continuación, algo se guarde en el portapapeles. Esto también funciona actualmente, pero solo si hace doble clic en la etiqueta. ¿Cómo soluciono que solo tengo que hacer clic una vez y aparece directamente en el portapapeles?

 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> ); };