React Native: Passing Params to a different Screen using navigationOptions

I am trying to set my header title to my passed param.

So basically I have two files that are communicating.

Categories.js:

import { CATEGORIES } from '../data/dummy-data';

const CategoriesScreen = props => {

    const renderGridItem = itemData => {
        return (
            <TouchableOpacity onPress={() => {
                props.navigation.navigate('CategoryMeals', { categoryId: itemData.item.id });
            }} >
                <View style={styles.gridItem}>
                    <Text>{itemData.item.title}</Text>
                </View>
            </TouchableOpacity>
        );
    };

On this file I am passing a params categoryId so that I can use it on the CategoryMealsScreen.js:

CategoryMealsScreen.js

import { CATEGORIES } from '../data/dummy-data';

const CategoryMealsScreen = props => {

    const catId = props.route.params.categoryId;

    const selectedCategory = CATEGORIES.find(cat => cat.id === catId);

    return (
        <View style={styles.screen}>
            <Text>Category Meals Screen</Text>
            <Text>{selectedCategory.title}</Text>
            <Button title="Go to Details" onPress={() => {
                props.navigation.navigate('MealDetail');
            }} />


            <Button title="Go Back" onPress={() => {
                props.navigation.goBack();
            }} />
        </View>
    );
}

CategoryMealsScreen.navigationOptions = navigationData => {
    const catId = props.route.params.categoryId;
    const selectedCategory = CATEGORIES.find(cat => cat.id === catId);

    return { 
        headerTitle: selectedCategory.title
     }
};

Focus on this code below:

CategoryMealsScreen.navigationOptions = navigationData => {
        const catId = props.route.params.categoryId;
        const selectedCategory = CATEGORIES.find(cat => cat.id === catId);
    
        return { 
            headerTitle: selectedCategory.title
         }
    };

Here I am trying to pull up the title from my dummy data to use it as my header title using navigationOptions but its not working. It doesn't change the header title at all.

What am I missing here? How can I fix this?

PS. I am using React Navigation version 5

EDIT: I organize all of my naviation inside a MealsNavigator.js file and then render all on App.js file:

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

import CategoriesScreen from '../screens/CategoriesScreen';
import CategoryMealsScreen from '../screens/CategoryMealsScreen';
import MealDetailScreen from '../screens/MealDetailScreen';

import Colors from '../constants/colors';

const MealsNav = createStackNavigator();

const MealsNavigator = () => {
    return (
        <NavigationContainer>
            <MealsNav.Navigator
                screenOptions={{
                    headerStyle: {
                        backgroundColor: Colors.primaryColor,
                    },
                    headerTintColor: '#fff',
                    headerTitleStyle: {
                        fontSize: 17
                    }
                }}
            >
                <MealsNav.Screen
                    name="Categories"
                    component={CategoriesScreen}
                    options={{
                        title: 'Meals Categories'
                    }}
                />
                <MealsNav.Screen name="CategoryMeals" component={CategoryMealsScreen} />
                <MealsNav.Screen name="MealDetail" component={MealDetailScreen} />
            </MealsNav.Navigator>
        </NavigationContainer>
    );
};

export default MealsNavigator;