Unable to navigate using reusable card components in React Native

Question

I have this HomeScreen file, in it I have added Card component(Dashboard & Highlights), I have Customized the Card Components with the TitleCard to reuse the styling,

In each card there is "View All" Button to navigate to its individual Screens,

When I don't use the Cards and put the entire code in home screen and Click on the View All Button on home screen then it navigates to that page, but when I use the Cards and use its props to navigate to the link provided as forwardLink props then

I get this error "ReferenceError: Can't find variable: navigation"

Also when I add this.props.navigation.navigate('{props.forwardLink}') in TitleCard

I get this error message: TypeError: undefined is not an object (evaluating '_this.props.navigation')

Here are the codes for each file

TitleCards

import React from 'react';
import {StyleSheet, Text, View, TouchableOpacity} from 'react-native';

const TitleCards = props => {
  
  
  return (<View style={styles.textTitlesContainer}>
    <Text style={styles.textTitle}>{props.leftTitle}</Text>
    <TouchableOpacity 
          onPress={() => navigation.navigate('{props.forwardLink}')}>
          <Text style={[styles.textTitle, {color: '#F483A7'}]}>
            {props.rightTitle}
          </Text>
        </TouchableOpacity>
    </View>)
};

const styles = StyleSheet.create({
  textTitlesContainer: {
    flex: 1,
    width: '100%',
    flexDirection: 'row',
    justifyContent: 'space-between',
    padding: 5,
  },
  textTitle: {
    fontSize: 20,
    fontWeight: '800',
    color: '#fff',
  },
});

export default TitleCards;

HomeScreen

import React, {Component} from 'react';
import {
  SafeAreaView,
  ScrollView,
  StyleSheet,
} from 'react-native';

import {CustomHeader} from '../index';
import Colors from '../constants/Colors';


import DashboardCard from './DashboardCard';
import HighlightCard from './HighlightCard';

export class HomeScreen extends Component {
  render() {
    return (

      <SafeAreaView style={{flex: 0, backgroundColor: Colors.primary}}>
        <CustomHeader 
          title="Home"
          isHome={true}
          navigation={this.props.navigation}
          />
        <ScrollView style={styles.container}>
          <DashboardCard />
          <HighlightCard />
        </ScrollView>

    
      </SafeAreaView>
          
    );
  }
}

const styles = StyleSheet.create({
  container: {
    height:900,    backgroundColor: Colors.mainBackground,
    
    paddingTop:6,
  },
});

export default HomeScreen;

HighlightCard

import React, {Component} from 'react';
import {Text, View} from 'react-native';
import {CustomHeader} from '../../index';


const HighlightCard = (prop) => {
  return (
    <Card>
      <TitleCards leftTitle="Highlights" rightTitle="View More" forwardLink="Highlights">
        
      </TitleCards>
      <View>
        <Text>News Feed</Text>
      </View>
    </Card>
  );
};

export default HighlightCard;

const styles = StyleSheet.create({
  textTitle: {
    fontSize: 20,
    fontWeight: '800',
    color: '#fff',
  },
});

When I use the HighlightCard codes directly in HomeScreen then it navigates to that page, below is that code which works if I use it directly in Home Screen

*{/* <Text style={styles.textTitle}>Highlights</Text>
            <TouchableOpacity
              onPress={() => this.props.navigation.navigate('Highlights')}>
              <Text style={[styles.textTitle, {color: '#F483A7'}]}>View All</Text>
            </TouchableOpacity> */}*

I think there is something wrong I am doing is using the props or referencing to the navigation page

I also tried creating a const for navigation

const {navigate} = this.props.navigation

this didn't worked either