[Request] Expose `setValue` method from `useClipboard` hook

Description

Please expose a new setValue method from the hook so users can update the value the onCopy method will copy to the user’s clipboard

Problem Statement/Justification

There are frequently times where a page has multiple components that can all be copied to a clipboard. The useClipboard hook doesn’t expose a way to change that value and, as a result, the dev is forced to rely on a re-render to execute for a useState value to update before the clipboard will work OR the dev will need to abstract the copy-able value into a new component so multiple hooks can exist on one page.

Proposed Solution or API

const defaultValue = 'some string';
const { onCopy, setValue } = useClipboard(defaultValue);

// ...

const updatedValue = 'some new string';
setValue(updatedValue);
onCopy();
// updatedValue copied to clipboard

Alternatives

Moving all relevant copy-able elements to their own components (ideal from an abstraction standpoint, but often unnecessary if the original file is trivially small)

Additional Information

No response

[nachoiacovino]

I ended up doing this to fix it on every part of the app we use useClipboard:

const { onCopy, setValue } = useClipboard(address || "");

useEffect(() => {
  if (address) {
    setValue(address);
  }
}, [address, setValue]);

Leaving this for future reference but seems a bit redundant having to always do this.

[RobinClowers]

This is an extremely confusing api for a hook. If a hook takes a value, it should react to changes in that value, not require calling a separate function to update it. This was also a breaking change despite what https://github.com/chakra-ui/chakra-ui/pull/6763 says.