How to call external function in component?

Sorry for this basic question. I'm using this stopwatch module for react-native. Since I want to keep my code clean and want to re-use the stopwatch I decided to make it in a component. However, I don't want any buttons or controls, I just want to start/stop/reset by calling the function.

StopwatchComponent.js

import { TouchableOpacity, Text, View } from "react-native";
import { Stopwatch } from "react-native-stopwatch-timer";

function StopwatchComponent(props) {
  const [isStopwatchStart, setIsStopwatchStart] = useState(false);
  const [resetStopwatch, setResetStopwatch] = useState(false);

  function startTimer() {
    setIsStopwatchStart(true);
    setResetStopwatch(false);
  }

  function stopTimer() {
    setIsStopwatchStart(false);
    setResetStopwatch(false);
  }

  function resetTimer() {
    setIsStopwatchStart(false);
    setResetStopwatch(true);
  }

  return (
    <View>
      <Stopwatch
        start={isStopwatchStart}
        reset={resetStopwatch}
        options={options}
      />
      <TouchableOpacity onPress={startTimer}><Text>Start</Text></TouchableOpacity> //temporarily for testing purpose
    </View>
  );
};

export default StopwatchComponent;

const options = {
  container: {
    backgroundColor: "#FF0000",
    padding: 5,
    borderRadius: 5,
    width: 150,
    alignItems: "center"
  },
  text: {
    fontSize: 25,
    color: "#FFF",
    marginLeft: 7
  }
};

How.js (where I call the component)

import React, { useState } from 'react';
import { TouchableOpacity, Image, View, Text } from 'react-native';
import { styles } from '../styles/WhyStyle';
import axios from 'axios';
import Stopwatch from '../components/StopwatchComponent';
import settings from '../user_settings/config.json';

const url = `${settings.ipAddress}`

function How(props) {
    const [stopwatchVisible, setStopwatchVisible] = useState(false);
  
    async function fireTrigger(num, conditions) { 
        try {
          await axios.post(`${url}/api/trigger` , 
            {
              num: num,
              conditions: conditions
             })
        } catch(e) {
          console.error(e)
        }
      }

    return (
        <View style={styles.container}>
            <View style={styles.header}>
                <Text style={styles.title}>How</Text>
            </View>
            <Text style={styles.titleControls}>Bediening verlichting</Text>
            <View style={styles.controls}>
                <TouchableOpacity 
                        style={styles.button} 
                        onPress={() => fireTrigger(settings.timelineNumbers.startSession, true)}>
                    <Text style={styles.buttonText}>Start sessie</Text>
                </TouchableOpacity>
                <Stopwatch startTimer/>
            </View>
            <View style={styles.footer}>
                <TouchableOpacity onPress={() => props.navigation.navigate('Controls')}>
                    <View style={styles.backImageContainer}>
                        <Image
                            style={styles.backImage}
                            source={require('../assets/app/icons/back.png')}
                        />
                    </View>
                </TouchableOpacity>
                <Image
                    style={styles.logo}
                    source={require(`../user_settings/user_logo/logo.png`)}
                />
            </View>
        </View>
    )
}

export default How;

2nd question: I did some testing, but I was hoping when using the timer in a component the timer kept on running while leaving screen. It doesn't do this unfortunately. I'm curious if there is a way to keep the stopwatch running while not on the same screen.. ?

Thanks in advance!