Using Chakra UI's useClipboard hook

I have multiple input fields populated with data gotten from redux store. I need help to implement a copy to clipboard function for each input field. Tried doing this but no luck:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

import { useClipboard } from "@chakra-ui/react";

const { sandboxKey, token } = useSelector((state) => state.apikeys);
  
const { onCopy, value, setValue, hasCopied } = useClipboard("");

return (
 <InputGroup>
   <Input 
     value={token}
     onChange={(e) => {
     setValue(e.target.value);
     }}
     />
   <InputRightElement>
     <Button onClick={onCopy}>
      {hasCopied ? "Copied!" : "Copy"}
     </Button>
   </InputRightElement>
 </InputGroup>
 
 <InputGroup>
   <Input 
     value={prodkey.prodKey}
     onChange={(e) => {
     setValue(e.target.value);
     }}
     />
   <InputRightElement>
     <Button onClick={onCopy}>
      {hasCopied ? "Copied!" : "Copy"}
     </Button>
   </InputRightElement>
 </InputGroup>
)

<!-- end snippet -->

You should call the useClipboard hook twice for copying from two distinct inputs. In addition, you should pass the value returned by the hook to the Input's value instead of always passing the same value.

const tokenCopy = useClipboard(token);
const prodKeyCopy = useClipboard(prodkey.prodKey);
return (
	<>
		<InputGroup>
			<Input 
			 value={tokenCopy.value}
			 onChange={e => tokenCopy.setValue(e.target.value)}
			 />
			<InputRightElement>
			 <Button onClick={tokenCopy.onCopy}>
			  {tokenCopy.hasCopied ? "Copied!" : "Copy"}
			 </Button>
			</InputRightElement>
		</InputGroup>
		<InputGroup>
			<Input 
			 value={prodKeyCopy.value}
			 onChange={e => prodKeyCopy.setValue(e.target.value)}
			 />
			<InputRightElement>
			 <Button onClick={prodKeyCopy.onCopy}>
			  {prodKeyCopy.hasCopied ? "Copied!" : "Copy"}
			 </Button>
			</InputRightElement>
		</InputGroup>
	</>
);

</details>