copy-to-clipboard.js

function CopyButton({ value }) {
  let [copied, setCopied] = React.useState();
  let hydrated = usePageIsHydrated();
  React.useEffect(() => {
    let id = setTimeout(() => setCopied(false), 2000);
    return () => clearTimeout(id);
  }, [copied]);

  return (
    <button
      disabled={!hydrated}
      onClick={() => {
        navigator.clipboard.writeText(value);
        setCopied(true);
      }}
    >
      <ClipboardSvgIcon />
      {copied ? "Copied!" : "Copy"}
    </button>
  );
}

I'm not really sure, but won't the effect be executed twice? One time triggered when copied is set to true, and another time when copied is set to false which will make copied to false again (but won't cause another effect since the value didn't change)
I don't think it affects much, just a point there

Yes, I think you are right.
It just happens to be fine in this case.
Adding a if (copied) clause may be better.

Do you mind sharing usePageIsHydrated?