Добавить правильный запасной вариант для копирования в API буфера обмена в приложении React.

Question

Я использую React 17 и создаю функцию копирования в буфер обмена:

У меня есть состояние:

      const [isCopied, setIsCopied] = useState(false);

Затем функции:

        const copyTextToClipboard = async (text: string) => {
    if (navigator?.clipboard?.writeText) {
      await navigator.clipboard.writeText(text);
    }
    // What to do here since `document.execCommand('copy', true, text);` is deprecated??
  };

  const handleCopyClick = () => {
    copyTextToClipboard(copyText)
      .then(() => {
        setIsCopied(true);
        setTimeout(() => {
          setIsCopied(false);
        }, 1500);
      })
      .catch((err) => {
        console.log(err);
      });
  };

Затем внутри jsx у меня есть текст и кнопка:

        <p>{copyText}</p>
  <button type="button" onClick={handleCopyClick}>
    <span>{isCopied ? 'Copied!' : 'Copy'}</span>
  </button>

Можно ли оптимизировать/рефакторить этот код и сделать его чище? И как добавить запасной вариант для копирования в API буфера обмена, если он не поддерживается или в этом нет необходимости, поскольку все современные браузеры его поддерживают?