title: Undefined is not an object (evaluating 'route.params.title')
body: <p>I followed the React Navigation Doc to achieve a <a href="https://reactnavigation.org/docs/headers/" rel="nofollow noreferrer">Dynamic header title change</a> but It shows the error Undefined is not an object (evaluating 'route.params.title').</p>
  <p>My tabs.js:</p>
  <pre><code>function HomeStackScreen() {
    return (
      &lt;HomeStack.Navigator&gt;
        &lt;HomeStack.Screen
          name=&quot;Home&quot;
          component={Home}
          options={{ headerShown: false }}
        /&gt;
        &lt;HomeStack.Screen
          name=&quot;Profile&quot;
          component={Profile}
          options={({ route }) =&gt; ({ title: route.params.title })}
        /&gt;
      &lt;/HomeStack.Navigator&gt;
    );
  }
  </code></pre>
  <p>The Home.js has the onpress like that:</p>
  <pre><code>&lt;TouchableOpacity
    onPress={() =&gt; {
      navigation.navigate('Profile', {
        title: 'Custom title',
      });
    }}
  &gt;
  </code></pre>
  <p>And Profile.js:</p>
  <pre><code>function Profile({ navigation }) {
    return (
      &lt;View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}&gt;
        &lt;Text&gt;Hello&lt;/Text&gt;
        &lt;Button title=&quot;Go back&quot; onPress={() =&gt; navigation.goBack()} /&gt;
      &lt;/View&gt;
    );
  }
  </code></pre>