Navigation not working for deeply nested component! Cant find solution?

Super long and detailed post ahead. I tried not to miss anything.

I have a deeply nested screen that does not display when clicked.

TL, DR: When I click a username from a global flatlist of posts [Flatlist 1], I am presented with a profile modal and another flatlist [flatlist 2] of the clicked user's posts. However, when clicking the post inside the flatlist 2, the details screen is not presented.

The post details screen is presented when I click the post from the first flatlist, but not from the second, nested flatlist. I am guessing its a navigation issue.

Here is the structure:

Home Screen 
   |
   |----------Is a container for a Flatlist
   |
Flatlist of Global Posts
   |
   |----------This flatlist displays all Global Posts
   |
 Post
   |
   |----------Each post contains the poster's Username, which is clickable
   |----------Each post is clickable, and opens up the post details screen
   |----------This works fine!
   |
Poster's Username
   |
   |----------When clicked, opens a Profile Modal of the poster's information
   |
Poster's Profile Modal
   |
   |----------The modal contains the user's profile information, and another Flatlist
   |
2nd Flatlist
   |
   |----------This flatlist is only the specific clicked users Posts
   |
  Post
   |
   |----------When a specific post is clicked, it should open a post details screen
   |----------However, it is not opening up the post details screen
   |
Post Details Screen

This is where I am running into issue.

This is unusual, because I do the same thing for Flatlist 1 of global posts.

So what is different? The screen I want is nested within a modal and second flatlist. I am passing the navigation props from the first flatlist cell, and passing navigation props from the modal component to the second flatlist.

Modal Component:

 constructor(props) {
    super(props);
    this.state = {
        showProfileModal: false,
        isLoading: true,
        navigation: this.props.navigation, <-------- navigation from the first flatlist cell
        isFollowing: false
 }

 ....

render() {
    return (
    <ClickedUserPostFeed navigation = {this.state.navigation} [other params] /> <---- Passing navigation to the second flatlist here
     ) 
 }

Within the ClickedUserPostFeed [2nd Flatlist]:

constructor(props) {
    super(props);
    this.state = {
      isLoading: true,
      userPostsArray: [],
      clickedUserUID: this.props.clickedUserUID,
      navigation: this.props.navigation <---------- Got Navigation from modal component
    };

.....


render() {
    const { navigation } = this.props;
    const renderItem = ({ item }) => (

        <ClickedUserPostCell 
            //Other params
            navigation={navigation} <---------- Passing navigation to the cell component
            cost_basis={item.cost_basis}
        />
    );
    
    if(this.state.isLoading){
        return(
          <View style={styles.container}>
            <ActivityIndicator size="large" color="#9E9E9E"/>
          </View>
        )
    }    

    return (
        <View style={styles.container}>
            <FlatList
                data={this.state.userPostsArray}
                renderItem={renderItem}
                keyExtractor={item => item.key}
            />
          </View>   
    )

Within the ClickedUserPostCell:

 constructor(props) {
    super(props)
    this.state = {
        //Other params
        navigation: this.props.navigation, <---------- Getting navigation
        isLoading: false,
        currentUser: Firebase.auth().currentUser.uid,
    }
}

...

showPostPage = () => {
    this.props.navigation.navigate('ClickedPostPageUser',  <------------ This isn't working
    {
        //Params here
    })
}

I have also tried adding everything to the stack:

 <Stack.Screen name="Cell"  <------------------ the first flatlist cells 
          component={FeedCellClass}
          options=  {{
            headerLeft: null
        }}/>
        <Stack.Screen name="ClickedUserPostCell"  <---------- the second flatlist cells (poster posts)
          component={ClickedUserPostCell}
          options=  {{
            headerLeft: null
        }}/>
        
        <Stack.Screen name="ClickedUserPostFeed" <---------- the second flatlist itself
          component={ClickedUserPostFeed}
          options=  {{
            headerLeft: null
        }}/>
        <Stack.Screen name="ClickedPostPageUser" <----------- the details screen I want to show
          component={ClickedPostPageUser}
          options=  {{
            title: "post details",
              headerTitleStyle: {
                fontWeight: 'bold',
                fontSize: 24,
              },
            headerLeft: null
        }}/>

I know that up to the first flatlist, the navigation is working correctly because I am able to use this.props.navigation.navigate and display the correct details screen. The second flatlist is not receiving navigation correctly, or maybe some other issue. I am not getting any warnings or error from the console, but the post details is not being displayed when clicked from a user profile modal.

Thanks in advance, let me know if you need any more information/code/clarification.