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

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>  );}// PropertiesInventoryScreen.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>  );}// PropertiesSeedScreen.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 herehttps://github.com/react-navigation/react-navigation/issues/6516