How to use a geolocation component that watches changes in geolocation?

I have a App component which is:

import Home from './screens/Home';import * as React from 'react';const App = () => {  return <Home />;};export default App;

My home component looks like:

  export default class Home extends React.PureComponent {  render() {    return (<><View style={styles.container}><Text style={styles.heading}> Location Manager </Text><CurrentLocation /><LocationList /></View><ClearButton /></>    );  }}

I wrote a component that watches for location changes:it looks like:

export const useGeolocation = (): [string, GeolocationData] => {  const [error, setError] = useState('');  const [position, setPosition] = useState<GeolocationData>({    latitude: 0,    longitude: 0,  });  useEffect(() => {    const watchId = Geolocation.watchPosition(      (pos) => {        setError('');        setPosition({          latitude: pos.coords.latitude,          longitude: pos.coords.longitude,        });      },      (e) => setError(e.message),    );    return () => Geolocation.clearWatch(watchId);  }, []);  return [error, position];};

Now how do I use this component? where do I place this? I read it on a tutorial that it will unsubscribe when user is not using the app (backgrounded) or component will unmount? How to achieve that?