TypeError: undefined is not an object (evaluating 'navigation.navigate') given when {navigation} parameter already nested in component - react-native

Question

Whenever I put a component with navigational capabilities in another component I always get the error in the title.
Component with Navigation passed in:
import React from 'react'
import { View, Text, Pressable, StyleSheet } from 'react-native'
import Ionicons from 'react-native-vector-icons/Ionicons'
const SearchBar = ({navigation}) => {
return (
<Pressable style={styles.SearchBar} onPress={() => navigation.navigate('Settings Search')}>
<Ionicons name='settings-outline' color='#06d900' size={28} />
<Text style={styles.searchBarText}> Search Settings</Text>
</Pressable>
)
}
export default SearchBar;
const styles = StyleSheet.create({
SearchBar: {
width: '80%',
backgroundColor: 'white',
height: 42,
borderRadius: 20,
alignItems: 'center',
flexDirection: 'row',
position: 'absolute',
top: 10,
left: '10%',
paddingLeft: 10,
},
searchBarText: {
color: '#d3d3d3',
fontSize: 15,
width: '100%'
},
})
File with Component nested inside of it:
import * as React from "react";
import { StyleSheet, Text, View, Pressable, ScrollView, TouchableOpacity } from "react-native";
import Ionicons from 'react-native-vector-icons/Ionicons';
import SimpleLineIcons from 'react-native-vector-icons/SimpleLineIcons'
import SearchBar from "./Settings/SearchBar";
import SettingsList from "./Settings/SettingsList/SettingsList";
import SettingsListHeader from "./Settings/SettingsListHeader";
export default function SettingsScreen({navigation}) {
return (
<View style={styles.container}>
<SearchBar />
{/* <Pressable style={styles.SearchBar} onPress={() => navigation.navigate('Settings Search')}>
<Ionicons name='settings-outline' color='#06d900' size={28} />
<Text style={styles.searchBarText}> Search Settings</Text>
</Pressable> */}
<SettingsListHeader />
<ScrollView style={{marginTop: 35,
}} showsVerticalScrollIndicator={false}>
<SettingsList />
The component being nested into the file is "SearchBar" and when you click on it you are supposed to be directed to another page but instead, I get an error
TypeError: undefined is not an object (evaluating 'navigation.navigate')
and I am confused about how to solve it.

Answer 1

Found out that only the direct child of my route can use the navigation prop so I decided to pass the navigation prop to my component SearchBar
export default function SettingsScreen(props, {navigation}) {
return (
<View style={styles.container}>
<SearchBar navigation={props.navigation} />