fix: copy to clipboard

web/app/components/header/account-setting/members-page/invited-modal/invitation-link.tsx

 'use client'
-import React, { useEffect, useState } from 'react'
-import copy from 'copy-to-clipboard'
+import React, { useCallback, useEffect, useState } from 'react'
+// import copy from 'copy-to-clipboard'
 import { t } from 'i18next'
 import s from './index.module.css'
 import Tooltip from '@/app/components/base/tooltip'
+import useCopyToClipboard from '@/hooks/use-copy-to-clipboard'
 
 type IInvitationLinkProps = {
   value?: string
@@ -13,6 +14,12 @@ const InvitationLink = ({
   value = '',
 }: IInvitationLinkProps) => {
   const [isCopied, setIsCopied] = useState(false)
+  const [_, copy] = useCopyToClipboard()
+
+  const copyHandle = useCallback(() => {
+    copy(value)
+    setIsCopied(true)
+  }, [value, copy])
 
   useEffect(() => {
     if (isCopied) {
@@ -35,10 +42,7 @@ const InvitationLink = ({
             content={isCopied ? `${t('appApi.copied')}` : `${t('appApi.copy')}`}
             className='z-10'
           >
-            <div className='absolute top-0 left-0 w-full pl-2 pr-2 truncate cursor-pointer r-0' onClick={() => {
-              copy(value)
-              setIsCopied(true)
-            }}>{value}</div>
+            <div className='absolute top-0 left-0 w-full pl-2 pr-2 truncate cursor-pointer r-0' onClick={copyHandle}>{value}</div>
           </Tooltip>
         </div>
         <div className="flex-shrink-0 h-4 bg-gray-200 border" />
@@ -48,10 +52,7 @@ const InvitationLink = ({
           className='z-10'
         >
           <div className="px-0.5 flex-shrink-0">
-            <div className={`box-border w-[30px] h-[30px] flex items-center justify-center rounded-lg hover:bg-gray-100 cursor-pointer ${s.copyIcon} ${isCopied ? s.copied : ''}`} onClick={() => {
-              copy(value)
-              setIsCopied(true)
-            }}>
+            <div className={`box-border w-[30px] h-[30px] flex items-center justify-center rounded-lg hover:bg-gray-100 cursor-pointer ${s.copyIcon} ${isCopied ? s.copied : ''}`} onClick={copyHandle}>
             </div>
           </div>
         </Tooltip>