React Navigation (Native) navigation.navigate isn't working and throwing an undefined error

My Custom Button that should take me home doesn't and give me an "undefined error." I'm pretty sure its because the Stack Navigator stuff is in the main file, but I don't know how to give this code file access to it and my Google efforts and the Docs have been unsuccessful. Any help on this simple issue would be appreciated.

import React from 'react';
import { View, Text, Image, StyleSheet } from 'react-native';
import CustomButton from './CustomButton';
import { useFonts } from 'expo-font';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import player from './Player';
import App from './App';
import usePotion from './UsePotion';
import { useState } from 'react';
import { useEffect } from 'react';

    

function BattleScreen({ navigation }) {
    
    const [fontsLoaded, error] = useFonts({
        'Valorax': require('./Fonts/Valorax.otf'),
      });
    
      if (!fontsLoaded) {
        return <Text>Loading...</Text>;
      }


    return (
      <View style={styles.container}>
        <Text style={styles.text}>{player.potions}</Text>
        <View style={styles.topHalf}>
        </View>
        <View style={styles.bottomHalf}>
          <View style={styles.buttonRow}>
            <CustomButton onPress={() => handleAttack()} title='Attack'></CustomButton>
            <CustomButton onPress={() => handleMagic()} title='Magic'></CustomButton>
          </View>
          <View style={styles.buttonRow}>
            <CustomButton onPress={usePotion()} title='Use Potion'></CustomButton>
            <CustomButton onPress={() => handleRun()} title='Run'></CustomButton>
            <CustomButton onPress={() => navigation.navigate('Home')} title="Home"></CustomButton>
          </View>
        </View>
      </View>
    );
  }
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: '#000000',
    },
    topHalf: {
      flex: 1,
      color: 'white',
    },
    bottomHalf: {
      flex: 1,
      flexDirection: 'row',
      flexWrap: 'wrap'
    },
    buttonRow: {
      flex: 1,
      flexDirection: 'row',
      justifyContent: 'space-evenly',
      flexWrap: 'wrap'
    },
    text: {
        fontSize: 90,
        color: 'white',
        fontFamily: "Valorax",
    }
  });


export default BattleScreen;
**strong text**

Try using the useNavigation hook (https://reactnavigation.org/docs/use-navigation/):

import { useNavigation } from '@react-navigation/native';

function BattleScreen() {
    const [fontsLoaded, error] = useFonts({
        'Valorax': require('./Fonts/Valorax.otf'),
      });
      const navigation = useNavigation()
    
      if (!fontsLoaded) {
        return <Text>Loading...</Text>;
      }


    return (
      <View style={styles.container}>
        <Text style={styles.text}>{player.potions}</Text>
        <View style={styles.topHalf}>
        </View>
        <View style={styles.bottomHalf}>
          <View style={styles.buttonRow}>
            <CustomButton onPress={() => handleAttack()} title='Attack'></CustomButton>
            <CustomButton onPress={() => handleMagic()} title='Magic'></CustomButton>
          </View>
          <View style={styles.buttonRow}>
            <CustomButton onPress={usePotion()} title='Use Potion'></CustomButton>
            <CustomButton onPress={() => handleRun()} title='Run'></CustomButton>
            <CustomButton onPress={() => navigation.navigate('Home')} title="Home"></CustomButton>
          </View>
        </View>
      </View>
    );
  }