Using Functional React Native Components && Typescript with navigation and dynamically changing title

Question

I am learning React Native and attempting to use Typescript in my project to keep it clean for me.

I'm stuck on basic navigation.

I defined a parent screen using a functional component like this:

interface Props extends NavigationStackScreenProps {
  // ... other props
}

const InventoryScreen: NavigationStackScreenComponent<Props> = ({navigation/* destructured props */}) => {

  // ... other logic here

  return (
    <View style={styles.screen}>
      <Text>The Inventory Screen!</Text>
      <FlatList 
          data={SEEDS} 
          keyExtractor={(item, index) => item.seedId}
          renderItem={renderGridItem} 
          numColumns={1} 
      />

      <Button title="Go to Seeds" onPress={() =>{
        navigation.navigate('Seed');
      }}/>
    </View>
  );
}

// Properties
InventoryScreen.navigationOptions = {
  headerTitle: 'My Seeds',
  headerStyle: {
    backgroundColor: Colors.primaryColor,
  },
  headerTintColor: 'white',
};

Then I define a child screen in a similar way - but this is the screen I want to change when it is entered... interface

interface Props extends NavigationStackScreenProps {
  // ... other props
  seed: Seed,
}

const SeedScreen: NavigationStackScreenComponent<Props> = ({navigation}) => {
  const seed = navigation.getParam('seed');
  
  return (
    <View style={styles.screen}>
      <Text>The Seed Screen!</Text>
      <Text>{seed.seedId}</Text>
    </View>
  );
  
}

// Properties
SeedScreen.navigationOptions = (navigationData) => {
  console.log(navigationData);
};

I want to set the title in navigationOptions, but this way will not allow me to assign a function as an object. I get this error:

Type '(navigationData: NavigationScreenConfigProps<StackNavigationProp<NavigationRoute<NavigationParams>, Props>, unknown> & { ...; }) => void' is not assignable to type 'NavigationScreenConfig<StackNavigationOptions, StackNavigationProp<NavigationRoute<NavigationParams>, Props>, unknown> | undefined'.
  Type '(navigationData: NavigationScreenConfigProps<StackNavigationProp<NavigationRoute<NavigationParams>, Props>, unknown> & { ...; }) => void' is not assignable to type '(navigationOptionsContainer: NavigationScreenConfigProps<StackNavigationProp<NavigationRoute<NavigationParams>, Props>, unknown> & { ...; }) => StackNavigationOptions'.

25 SeedScreen.navigationOptions = (navigationData) => {

And

Type '{ ({

 navigation }: PropsWithChildren<NavigationStackScreenProps<Props, unknown>>): Element; navigationOptions(navigationData: NavigationScreenConfigProps<StackNavigationProp<NavigationRoute<NavigationParams>, Props>, unknown> & { ...; }): void; }' is not assignable to type 'NavigationStackScreenComponent<Props, unknown>'.
  Type '{ ({ navigation }: PropsWithChildren<NavigationStackScreenProps<Props, unknown>>): Element; navigationOptions(navigationData: NavigationScreenConfigProps<StackNavigationProp<NavigationRoute<NavigationParams>, Props>, unknown> & { ...; }): void; }' is not assignable to type 'FunctionComponent<NavigationStackScreenProps<Props, unknown>> & { navigationOptions?: NavigationScreenConfig<StackNavigationOptions, StackNavigationProp<...>, unknown> | undefined; }'.
    Type '{ ({ navigation }: PropsWithChildren<NavigationStackScreenProps<Props, unknown>>): Element; navigationOptions(navigationData: NavigationScreenConfigProps<StackNavigationProp<NavigationRoute<NavigationParams>, Props>, unknown> & { ...; }): 
void; }' is not assignable to type '{ navigationOptions?: NavigationScreenConfig<StackNavigationOptions, StackNavigationProp<NavigationRoute<NavigationParams>, Props>, unknown> | undefined; }'.
      Types of property 'navigationOptions' are incompatible.
        Type '(navigationData: NavigationScreenConfigProps<StackNavigationProp<NavigationRoute<NavigationParams>, Props>, unknown> & { ...; }) => void' is not assignable to type 'NavigationScreenConfig<StackNavigationOptions, StackNavigationProp<NavigationRoute<NavigationParams>, Props>, unknown> | undefined'.
          Type '(navigationData: NavigationScreenConfigProps<StackNavigationProp<NavigationRoute<NavigationParams>, Props>, unknown> & { ...; }) => void' is not assignable to type '(navigationOptionsContainer: NavigationScreenConfigProps<StackNavigationProp<NavigationRoute<NavigationParams>, Props>, unknown> & { ...; }) => StackNavigationOptions'.
            Type 'void' is not assignable to type 'StackNavigationOptions'.        
              Type 'void' is not assignable to type 'StackHeaderOptions'.

12 const SeedScreen: NavigationStackScreenComponent<Props> = ({navigation/* destructured props */}) => {

And the actual navigator class functions but also throws errors that it doesn't like the screens types.

There are so many layers of generics here I'm having a hard time deciphering this error.

Can you help me fix there error or point to an example of this working?

Or does this sound like a bug here https://github.com/react-navigation/react-navigation/issues/6516