React Native i have a one timer. How to inside change selected function use?

Question

I have a react native project. It's countdown timer. But i need inside the timer have 3-4 different function. And which selected touchableopacity button use only this function(running stop, selected start).

Start timer, default start function 1. 10 seconds after change selected function 2. Timer not stop and restart, resume 11-12-13 etc. But i need be can selected function 2 active, function 1 passive.

import { View, Text, TouchableOpacity, StyleSheet} from 'react-native' 
import React, { useState, useEffect } from 'react' 
import { SafeAreaView } from 'react-native-safe-area-context'; 
import Tts from 'react-native-tts'; 

export default function FTPage() {
 const [buttonDisabled, setButtonDisabled] = useState(false); 
const [buttonDisabled2, setButtonDisabled2] = useState(true); 
const [isText1Enabled, setIsText1Enabled] = useState(false); 
const [isText2Enabled, setIsText2Enabled] = useState(false); 
const [isText3Enabled, setIsText3Enabled] = useState(false); 
const [isText4Enabled, setIsText4Enabled] = useState(false);

const [timer11Time, setTimer11Time] = useState(false); const [timer12Time, setTimer12Time] = useState(false);

Tts.setDefaultRate(0.5); Tts.setDefaultLanguage('en-US');

const countdownDuration = 1800;

let countdownTimer = null;

if (textNumber === 1 ) {
setTimer11Time(true)
setTimer12Time(false)
setIsText1Enabled(true);

  setIsText2Enabled(false);
setIsText3Enabled(false);
setIsText4Enabled(false);
} else if (textNumber === 2) {
setTimer11Time(false)
setTimer12Time(true)

setIsText1Enabled(false);
setIsText2Enabled(true);
setIsText3Enabled(false);
setIsText4Enabled(false);

} else if (textNumber === 3) {
 setIsText1Enabled(false); 
setIsText2Enabled(false); 
setIsText3Enabled(true);
setIsText4Enabled(false);
}};

useEffect(() => {

let countdown = countdownDuration;

if(timer11Time){
 setButtonDisabled(true);//start timer button disable 
setButtonDisabled2(false);//enable other select buttons 
setIsText1Enabled(true); 
setIsText2Enabled(false); 
setIsText3Enabled(false); 
setIsText3Enabled(false); 
if (countdown === 1790) { 
 Tts.speak('Hello');} 
else if (countdown === 1783){ 
 Tts.speak('World'); } }

if(timer12Time){
 setButtonDisabled(true);//start timer button disable 
setButtonDisabled2(false);//enable other select buttons 
 setIsText1Enabled(true); 
setIsText2Enabled(false); 
setIsText3Enabled(false); 
setIsText3Enabled(false); 
if (countdown === 1793) {
Tts.speak('Hello');
}
 else if (countdown === 1780){
 Tts.speak('World'); 
} }

countdown--; }, 1000);

}, [timer11Time, timer12Time]);

const stopCountdown = () => { clearInterval(countdownTimer); };



 return (
<>
<SafeAreaView>
  <View>
<TouchableOpacity onPress={() => setTimer11Time(true)} disabled={buttonDisabled} style={buttonDisabled ? styles.appButtonContainerLock : styles.appButtonContainer}> 
<Text style={styles.appButtonText} > START TIMER </Text> 
</TouchableOpacity>
 </View> 
<View> 
<TouchableOpacity onPress={() => setTimer12Time(true)} disabled={buttonDisabled2 } style={[isText1Enabled ? styles.boxStylesLock : styles.boxStyles, buttonDisabled2 ? styles.boxStylesLock : styles.boxStyles]} > 
<Text style={styles.appButtonText}  > 1-1 </Text> </TouchableOpacity>
 <TouchableOpacity onPress={() => handleTextPress(2)} disabled={buttonDisabled2} style={[isText2Enabled ? styles.boxStylesLock : styles.boxStyles, buttonDisabled2 ? styles.boxStylesLock : styles.boxStyles]}>
      <Text style={styles.appButtonText} > 1-2 </Text>
    </TouchableOpacity>
   <TouchableOpacity onPress={() => handleTextPress(3)} disabled={buttonDisabled2} style={[isText3Enabled ? styles.boxStylesLock : styles.boxStyles, buttonDisabled2 ? styles.boxStylesLock : styles.boxStyles]}>
      <Text style={styles.appButtonText} > 2-1 </Text>
    </TouchableOpacity>



</>
    

 ) } const styles = StyleSheet.create({

appButtonContainer: { marginTop:30, marginLeft:10, marginRight:10, elevation: 8, backgroundColor: "#009688", borderRadius: 10, paddingVertical: 10, paddingHorizontal: 12,

}, appButtonContainerLock: { marginTop:30, marginLeft:10, marginRight:10, elevation: 8, backgroundColor: "#009688", borderRadius: 10, paddingVertical: 10, paddingHorizontal: 12, opacity:0.4 }, appButtonText: { fontSize: 18, color: "#fff", fontWeight: "bold", alignSelf: "center", textTransform: "uppercase"

},

ftButtonsView:{ flexDirection: 'row', flexWrap: 'wrap' },

boxStyles: { paddingHorizontal: 8, paddingVertical: 6, borderRadius: 4, backgroundColor: '#009688', alignSelf: 'flex-start', marginHorizontal: '1%', marginBottom: 6, minWidth: '48%', textAlign: 'center',

}, boxStylesLock: { paddingHorizontal: 8, paddingVertical: 6, borderRadius: 4, backgroundColor: '#009688', alignSelf: 'flex-start', marginHorizontal: '1%', marginBottom: 6, minWidth: '48%', textAlign: 'center', opacity:0.4 },

});