Подскажите, почему React Native не хочет открывать код?

я новичек в React Native. Пол года пишу код на нем. Я создал небольшой таймер обратного отсчета,

let seconds = 45;
    let index = 10;
    
    function buttonStart() {
    
        if (seconds > 0) {
            const timeR = setInterval(timer, 1000);
            timer();
        }
    
    }
    function timer() {
        remain = seconds;
        if (remain >= 0) {
            remain = seconds--;
            document.getElementById('timer').innerHTML = remain;
        }
        if (remain == 0) {
            if (index != 0) {
                seconds = 45
                index--
                timer()
            } else { return }
        }
    
    }

он прекрасно работает на чистом JS, но когда я добавляю его в код React Native,

import {StatusBar} from 'expo-status-bar';
import React from 'react';
import {SafeAreaView, StyleSheet, Text, View} from 'react-native';
import { Button } from 'react-native-web';



export const Tren = ({List}) => {

let seconds = 45;
let index = 10;

function buttonStart() {

    if (seconds > 0) {
        const timeR = setInterval(timer, 1000);
        timer();
    }

}
function timer() {
    remain = seconds;
    if (remain >= 0) {
        remain = seconds--;
        document.getElementById('timer').innerHTML = remain;
    }
    if (remain == 0) {
        if (index != 0) {
            seconds = 45
            index--
            timer()
        } else { return }
    }

}


return (
    <SafeAreaView style={styles.container}>
        <View style={styles.hiBox}>
            <Text style={styles.hiText}>
                Выполняемое упрожнение
            </Text>
        </View>

        <View style={styles.downBox}>
            <Text style={styles.downText}> Место для таймера </Text>
            <Text style={styles.timeText}>
                {seconds}
               
            </Text>
            
        </View>
        <StatusBar style="auto"/>
    </SafeAreaView>
);

}

const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: "#000", },

hiBox: {
    justifyContent: 'center',
    alignItems: 'center',
    color: '#fff',
    marginTop: '10.5vh',

},

hiText: {
    color: "#fff",
    fontWeight: "bold",
    fontSize: "20px;"
},
downText: {
    color: "#fff",
    fontSize: "15px",
    fontWeight: "bold",
},

timeText: {
    color: "#fff",
    fontSize: "50px",
    fontWeight: "bold"
},
downBox: {
    height: "100%",
    marginBottom: "15vh",
    alignItems: "center",
    marginTop: "50vh"
}


});

Появляется это

Uncaught ReferenceError: process is not defined
at 4043 (<anonymous>:2:13168)
at r (<anonymous>:2:306599)
at 8048 (<anonymous>:2:9496)
at r (<anonymous>:2:306599)
at 8641 (<anonymous>:2:1379)
at r (<anonymous>:2:306599)
at <anonymous>:2:315627
at <anonymous>:2:324225
at <anonymous>:2:324229
at e.onload (index.js:1:1)

Может кто нибудь подскажет что я делаю не так?