title: Cannot update a component (`ForwardRef(BaseNavigationContainer)`) while rendering a different component (`Home_Profile`)
body: <p>I get this error while trying to navigate between screens with react native stack navigator. I think this was working in my previous project which had react 17.0.1 and react native 0.64.2, this project is react 17.0.2 and react native 0.66.4, helps would be appreciated.</p>
  <p><strong>log</strong></p>
  <pre><code>Warning: Cannot update a component (`ForwardRef(BaseNavigationContainer)`) while rendering a different component (`Home_Profile`). To locate the bad setState() call inside `Home_Profile`, follow the stack trace as described in https://reactjs.org/link/setstate-in-render
  </code></pre>
  <p>error comes when I try to call navigation in an onPress prop on a Flatlist render item component.</p>
  <pre><code>renderItem={({ item }) =&gt; (
    &lt;View style={{ backgroundColor: &quot;#f6f6f6&quot; }}&gt;
       &lt;PostCard
          item={item}
          onPress={() =&gt; navigation.navigate(&quot;Home_Profile&quot;)}
       /&gt;
    &lt;/View&gt;
  )}
  </code></pre>
  <pre><code>const PostCard = ({ item, onPress }) =&gt; {
    
    React.useEffect(() =&gt; {
      async function fetchUserData() {
        const data = await getUserData(item.userid);
        setProfileimg(data.userimg);
        setName(data.name);
        setLocation(data.location);
      }
      fetchUserData();
    }, []);
  
    return (
          &lt;TouchableOpacity onPress={onPress}&gt;
              &lt;Text
                  style={{
                      color: &quot;#231454&quot;,
                      fontWeight: &quot;bold&quot;,
                      fontSize: 15,
                      marginBottom: 3,
                  }}
              &gt;
                  {name}
              &lt;/Text&gt;
          &lt;/TouchableOpacity&gt;
    )      
  };
  
  export default PostCard;
  </code></pre>
  <p><strong>Home_Profile</strong></p>
  <pre><code>import React from &quot;react&quot;;
  import { View, Text, Button } from &quot;react-native&quot;;
  
  const Home_Profile = ({ navigation }) =&gt; {
    return (
      &lt;View style={{ flex: 1, justifyContent: &quot;center&quot;, alignItems: &quot;center&quot; }}&gt;
        &lt;Text&gt;Home_Profile.js&lt;/Text&gt;
        &lt;Button title=&quot;back&quot; onPress={navigation.navigate(&quot;Home&quot;)} /&gt;
      &lt;/View&gt;
    );
  };
  
  export default Home_Profile;
  </code></pre>