Copy icon button

function Example() {
    const [value] = React.useState('https://blok.sitecore.com')
    const { onCopy, hasCopied } = useClipboard(value)
    
    return (
        <Stack spacing="6">
            <FormControl>
                <FormLabel>Share link</FormLabel>
                <InputGroup>
                    <Input isReadOnly value={value} />
                    <InputRightElement>
                        <Tooltip
                            label={hasCopied ? 'Copied' : 'Copy to clipboard'}
                            closeOnClick={false}
                        >
                            <IconButton
                                onClick={onCopy}
                                variant="ghost"
                                color={hasCopied ? 'success' : 'inherit'}
                                icon={
                                    <Box position="relative" w="1em" h="1em" display="flex" alignItems="center" justifyContent="center">
                                        <Icon
                                            as="div"
                                            position="absolute"
                                            opacity={hasCopied ? 0 : 1}
                                            transform={hasCopied ? 'scale(0.8)' : 'scale(1)'}
                                            transition="all 0.2s"
                                        >
                                            <path d={mdiContentCopy} />
                                        </Icon>
                                        <Icon
                                            as="div"
                                            position="absolute"
                                            opacity={hasCopied ? 1 : 0}
                                            transform={hasCopied ? 'scale(1)' : 'scale(0.8)'}
                                            transition="all 0.2s"
                                        >
                                            <path d={mdiCheckCircleOutline} />
                                        </Icon>
                                    </Box>
                                }
                                size="sm"
                                aria-label={hasCopied ? 'Copied' : 'Copy to clipboard'}
                            />
                        </Tooltip>
                    </InputRightElement>
                </InputGroup>
            </FormControl>

            <Box>
                <Tooltip
                    label={hasCopied ? 'Copied' : 'Copy to clipboard'}
                    closeOnClick={false}
                >
                    <IconButton
                        onClick={onCopy}
                        variant="ghost"
                        color={hasCopied ? 'success' : 'inherit'}
                        icon={
                            <Box position="relative" w="1em" h="1em" display="flex" alignItems="center" justifyContent="center">
                                <Icon
                                    as="div"
                                    position="absolute"
                                    opacity={hasCopied ? 0 : 1}
                                    transform={hasCopied ? 'scale(0.8)' : 'scale(1)'}
                                    transition="all 0.2s"
                                >
                                    <path d={mdiContentCopy} />
                                </Icon>
                                <Icon
                                    as="div"
                                    position="absolute"
                                    opacity={hasCopied ? 1 : 0}
                                    transform={hasCopied ? 'scale(1)' : 'scale(0.8)'}
                                    transition="all 0.2s"
                                >
                                    <path d={mdiCheckCircleOutline} />
                                </Icon>
                            </Box>
                        }
                        size="sm"
                        aria-label={hasCopied ? 'Copied' : 'Copy to clipboard'}
                    />
                </Tooltip>
            </Box>
        </Stack>
    )
}