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.

log

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

error comes when I try to call navigation in an onPress prop on a Flatlist render item component.

renderItem={({ item }) => (
  <View style={{ backgroundColor: "#f6f6f6" }}>
     <PostCard
        item={item}
        onPress={() => navigation.navigate("Home_Profile")}
     />
  </View>
)}

const PostCard = ({ item, onPress }) => {
  
  React.useEffect(() => {
    async function fetchUserData() {
      const data = await getUserData(item.userid);
      setProfileimg(data.userimg);
      setName(data.name);
      setLocation(data.location);
    }
    fetchUserData();
  }, []);

  return (
        <TouchableOpacity onPress={onPress}>
            <Text
                style={{
                    color: "#231454",
                    fontWeight: "bold",
                    fontSize: 15,
                    marginBottom: 3,
                }}
            >
                {name}
            </Text>
        </TouchableOpacity>
  )      
};

export default PostCard;

Home_Profile

import React from "react";
import { View, Text, Button } from "react-native";

const Home_Profile = ({ navigation }) => {
  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <Text>Home_Profile.js</Text>
      <Button title="back" onPress={navigation.navigate("Home")} />
    </View>
  );
};

export default Home_Profile;