How to use the @chakra-ui/core.useClipboard function in @chakra-ui/core

export const CopyJS = ({ colors }) => {
  const JS = `
{${colors.map((color, i) =>
  `
  ${getColorNumber(i)}: '${color.hex()}',`
).join('')}
}`;

  const { onCopy, hasCopied } = useClipboard(JS);

  return (
    
      <button size="xs">
        {hasCopied
          ? 'Copied! JS object'
          : 'Get JS object'
        }
      </button>
    
  );

export const Color = ({ color, title, isActive, ...props }) => {
  const { onCopy, hasCopied } = useClipboard(color.hex());

  return (

export const CopyCSS = ({ colors }) => {
  const CSS = `
:root {${colors.map((color, i) =>
  `
  --color-${getColorNumber(i)}: ${color.hex()};`
  ).join('')}
}`;
  const { onCopy, hasCopied } = useClipboard(CSS);

  return (
    
      <button size="xs">
        {hasCopied
          ? 'Copied! CSS variables'
          : 'Get CSS variables'
        }
      </button>
    
  );

const CopyButton = ({ bg = "secondary", copyValue, ...props }) => {
  const { onCopy, hasCopied } = useClipboard(copyValue);
  return (
    
      <button size="sm">
        {hasCopied ? (
          
        ) : (
          
        )}</button>

const SVG = `
  <svg viewBox="0 0 200 20" height="20" width="200" xmlns="http://www.w3.org/2000/svg">
    <g fill-rule="evenodd" fill="none">
      ${colors.map((color, i) =&gt; `
        <rect x="${20 * i}" fill="${color.hex()}" height="20" width="20"></rect>
      `).join('')}
    </g>
  </svg>
  `;
  const { onCopy, hasCopied } = useClipboard(SVG);

  return (
    
      <button size="xs">
        {hasCopied
          ? 'Copied! Figma/Sketch'
          : 'Get for Figma/Sketch'
        }
      </button>
    
  );