React component to copy an specific text to device's clipboard. Using "navigator.clipboard" and adding visual feedback after 5 seconds of copied.

Copy text to clipboard - React

 export default function ContactPage() {
 
 const [clipboardIsCopy, setClipboardIsCopy] = useState(false);
 const textToClipBoard = useRef("");

  const handleClipboardState = () => {
    const text = textToClipBoard.current.?textContent;
    navigator.clipboard.writeText(text);
    setClipboardIsCopy(!clipboardIsCopy);
    setTimeout(() => {
      setClipboardIsCopy(false);
    }, 5000);
  };       
  
  return (
     <>
       <div>
          <p>
            My email: <i ref={textToClipBoard}> emailtocopy@gmail.com </i>
          </p>
        </div>
        <button onClick={handleClipboardState}>
          {clipboardIsCopy ? (
            <span>
              Copiado&nbsp;&nbsp;<i className="fa-solid fa-check"></i>
            </span>
          ) : (
            <span>
              Copiar&nbsp;&nbsp;<i className="fa-regular fa-clipboard"></i>
            </span>
          )}
        </button>
      </>
   )
}