Проект на React.js. Для копирования текста в буфер обмена я

использовал эту функцию:
async (item, data) => {
const key = data?.key ?? ""
navigator.clipboard.writeText(key).then(() => {}).catch(err => {
console.error('Не удалось скопировать текст: ', err);
});
return Promise.resolve();
}
Тестировщик тестировал на dev стенде и сказал копирование не работает. Локально работает.
На dev стенде нет https и я понял что из-за этого там не работает.
Я посмотрел, а Chrome даже включить разрешение на копирование не позволяет https://i.imgur.com/DL7z5Bz.png .
Продакшн сайт будет на https, там будет работать по идее.

Я собираюсь использовать такую функцию.
function copyTextToClipboard(text) {
if (navigator.clipboard && window.location.protocol === 'https:') {
navigator.clipboard.writeText(text).then(() => {
console.log('Текст успешно скопирован в буфер обмена');
}).catch(err => {
console.error('Не удалось скопировать текст в буфер обмена', err);
});
} else {
const textarea = document.createElement("textarea");
textarea.value = text;
textarea.style.position = 'fixed';
document.body.appendChild(textarea);
textarea.focus();
textarea.select();

try {
document.execCommand('copy');
console.log('Текст успешно скопирован в буфер обмена с использованием execCommand');
} catch (err) {
console.error('Не удалось скопировать текст в буфер обмена с использованием execCommand', err);
}

document.body.removeChild(textarea);
}
}
Костыль, но вроде должно работать. А больше у меня нет вариантов? Может что посоветуете? Или я вообще все неправильно понял?

Привет А у тебя какой сборщик? Странно, что при разных протоколах не работает, по идеи не должно быть такого Мб есть какие ограничения на window.navigator, чекну доку. Костыль это конечно хорошо , для временно решения) А что в консоли говорит?

А консоль молчит почему-то. Проект на реакт