React Native: How do I pass auth token from Sign in to be used in future API calls?

When user logs in with correct credentials it returns a token. How can I pass that token for it to be used in future API calls?

Here is my SignIn code:

const SignIn = () => {
    const navigation = useNavigation();

    const {
        control, 
        handleSubmit, 
        formState: {errors},
    } = useForm();

    const onSignIn = (data) => {
        fetch('http://sign-in/',
            {
                method: 'POST',
                headers: {
                    "Content-Type": "application/json",
                    "Accept": 'application/json',
                },
                body: JSON.stringify(data),
            },
            console.log(data)
        )
        .then( data => data.json())
        .then( data => {
            navigation.navigate(BottomTab);
        })
        .catch(error => console.error(error));
    };

    return (
        <View style={styles.root}>
            <Text style={styles.text}>sign in</Text>
            <CustomInput
                name={"username"} 
                placeholder= 'username:'
            />
            <CustomInput
                name={"password"}
                placeholder= 'password:'
            />
            <CustomButton onPress={handleSubmit(onSignIn)} />
        </View>
    );
};

After user signs in it navigates to the bottom tab navigator:

const Tab = createBottomTabNavigator();

const BottomTab = () => {

    return (
        <Tab.Navigator
            initialRouteName={"Home"}>
            <Tab.Screen name='Home' component={Home} />
            <Tab.Screen name='Profile' component={Profile} />
        </Tab.Navigator>
    );
};

Which is nested in a Navigator:

const Stack = createNativeStackNavigator();

const Navigation = () => {

    return (
        <NavigationContainer >
            <Stack.Navigator screenOptions={{headerShown:false}} >
                <Stack.Screen name="SignIn" component={SignIn} />
                <Stack.Screen name="BottomTab" component={BottomTab} />
            </Stack.Navigator>
        </NavigationContainer>
    );
};

Which is called in my App.js:

function App() {

  return (
    <SafeAreaView style={styles.root}>
      <StatusBar barStyle="light-content" />
        <Navigation />
      </SafeAreaView>
    ); 
  }
  
  const styles = StyleSheet.create({
    root: {
      backgroundColor: '#121212',
      flex: 1
    }
  });
  
export default App;

I’m not sure where and how to pass the token for it to give me access to it in future API calls.

Do I do that in the Bottom Tab or when i make the API calls in the future?

Appreciate any help!