Dmytro Yurikov

const [timerInterval , settimerInterval ] = useState();

const setClock = () => {
if(endtime<=0&&timerInterval){
clearInterval(timerInterval);
alert(1)
return
}
const newtimerInterval = setInterval(tick(),1000)
settimerInterval(newtimerInterval)
}
function tick(){
setEndtime(endtime=>endtime-1)
console.log(endtime)
updateClock()
}
function updateClock(){
const t = (Date.parse(new Date()) + endtime) - Date.parse(new Date());
setMinutes(getZero(Math.floor((t/1000/60)%60)));
setSeconds(getZero(Math.floor((t/1000)%60)));
}

function getZero(num){ // добавляем нули к числу что бы было красиво
if(num<0){
return '00';
}
if(num >= 0 && num<10){
return `0${num}`;
}else{
return num;
}
}

const onPomodoro = () => {
document.body.classList.add("pomodoro");
document.body.classList.remove("short");
document.body.classList.remove("long");
setEndtime(15000000)
}

const onShortBreak = () => {
document.body.classList.add("short");
document.body.classList.remove("pomodoro");
document.body.classList.remove("long");
}

const onLongBreak = () => {
document.body.classList.add("long");
document.body.classList.remove("pomodoro");
document.body.classList.remove("short");
}

function onPlay(){
setClock()
}

function onPause(){
stopClock()
}
stopClock(){
if(timerInterval) {
clearInterval(timerInterval);
settimerInterval(0);
return;
}
}

Когда у тебя обрабатывается строка

const cards = document.querySelectorAll('.card__element');

Данных элементов на странице еще нет. Есть три решения данной проблемы.
Навешивать события в методе render, но лучше всего использовать делегирование событий. И самый фиговый запрос fetch сделать через async/await, тогда элементы уже будут на странице и текущий код сработает